大量的小请求与少量的大请求-Angularjs SPA



我有一个复杂的仪表板,我想每分钟更新一次。它是一个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优化的全部内容是:

  1. 确保绑定表达式求值快速
  2. 尽量减少观看的内容数量
  3. 最小化摘要周期的数量:通过比较新旧模型值来角度检查模型更改的阶段

但是,在您开始修复/优化上述任何部分之前,了解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等工具来衡量事情的运行情况,并确保需要这样的优化。

最新更新