我有一个复杂的仪表板,我想每分钟更新一次。它是一个Angularjs SPA应用程序,IIS后端在Azure中运行。
Dashboard上显示了大约30-40个dashlet小部件。每个小部件大约需要10个数据实体集合。每个集合每分钟获得大约3-5个新数据点
我想确保浏览器中的应用程序运行良好,可交互(这一点非常重要),并且我的网络服务器是可扩展的(这是次要的,因为我宁愿添加更多的网络服务器,也不愿牺牲浏览器的速度和交互性)
-
我应该立即更新整个仪表板吗?(1个非常大的调用,可能会下载1200-1600个数据实体……对一些用户来说可能会更多,对其他用户来说则会更少)。这给web服务器带来了最大的压力,从web服务器的角度来看,它的可扩展性较差。但我不确定浏览器的影响是什么
-
一次更新一个dashlet小部件?(30-40个粗块调用,每个调用返回大约40条信息)
-
是否单独更新仪表板内的每个数据实体集合?(大约300-400个小电话,每个电话返回3-5条信息)
可以假设生成1个大型更新和300-400个单独数据点的数据的服务器总时间非常相似。
更新的及时性并不重要。。。如果某些小部件在10秒后更新,而有些则按时更新,那也没关系。一般来说,浏览器和网站的响应性很重要,因此,如果用户决定与Dashlet交互,则的响应性应该很高
感谢任何建议
AngularJS优化的全部内容是:
- 确保绑定表达式求值快速
- 尽量减少观看的内容数量
- 最小化摘要周期的数量:通过比较新旧模型值来角度检查模型更改的阶段
但是,在您开始修复/优化上述任何部分之前,了解Angular数据绑定是如何工作的以及什么是摘要周期是很重要的。这个SO帖子应该在这方面对你有所帮助。
回到可能的优化。
修复第一个问题是确保如果您在绑定表达式中使用函数,它们的计算速度很快,并且不会进行任何计算密集型或远程操作。这仅仅是因为绑定表达式在多个摘要周期中被多次求值。
其次,尽量减少手表的数量。这需要分析视图绑定行为:
- 有哪些部分一旦绑定就不会改变:使用bindonce direcitive,或者如果你在Angular 1.3上,Angular本身支持在表达式中使用
::
语法进行一次绑定 - 只为视图中可见的内容创建DOM元素:使用ng if或ng switch而不是ng show \ng hide会有所帮助。查看ngInfiniteCroll的工作原理
最后,减少摘要周期的数量会有所帮助,因为这意味着在应用程序的生命周期内要执行的脏检查数量会减少。Angular将在应用程序执行期间的不同时间执行这些摘要循环。
每个远程调用也会产生一个完整的摘要周期,因此减少远程调用将有所帮助。如果使用scope.$digest
而不是scope.$apply
,则还有一些进一步的优化可能性。scope.$apply
触发应用程序范围的摘要循环,而scope.$digest
仅触发子作用域。要真正优化摘要周期,请查看Brian Ford 的AngularJS构建Huuuuuge应用程序
但在任何事情之前,都要使用Batarang等工具来衡量事情的运行情况,并确保需要这样的优化。