在超过200个中等到复杂的屏幕上将angular js用于Web应用程序的可行性

Gan*_*hag 2 memory performance angularjs

我的团队正在考虑将angular js用于Web应用程序UI开发。但是从高层次上知道单页应用程序是如何工作的,我想知道对于大型Web应用程序使用angular js框架有多可行。这将至少有200个屏幕,每个屏幕平均包含30个UI控件,例如文本框,日历控件,下拉菜单等。

用户将在台式机或笔记本电脑上访问该Web应用程序,并且将在整个8小时的一天中一直在浏览器中使用该应用程序,而无需关闭浏览器。

给定以上用法,是否会出现角度js,内存使用/性能问题?

是否有生产和日常使用的,使用angular js构建且具有庞大而复杂的UI的Web应用程序?

bha*_*tol 5

您不仅可以拥有200个屏幕,而且可以拥有1000个屏幕-只要您解决以下核心和基本问题,这个数字就无关紧要。它们全都归结为内存和性能。

  1. 在给定的时间点,将有多少个$ watch有效。
  2. 在给定的时间点创建了多少个侦听器。
  3. 在给定的时间点,DOM的复杂性是多少,即DOM元素的数量和嵌套/深度。
  4. 在给定的时间点,内存中将加载多少个Javascript模块(服务,控制器等)。即使这些东西是单例的,它们也会消耗内存。
  5. 对于每个这样的屏幕,将消耗多少内存(如果使用jqueryUI等,则您的内存将比纯angular + html组件迅速增加)

这使您可以控制上述因素,如果不注意这些因素,则会导致应用程序崩溃/崩溃。

1)如何打破“大型”应用程序的运行时复杂性?现在,您可以想到“路由器”或对话框。每个屏幕都会不断变化,也就是说,您永远不会同时显示200个屏幕。

2)确保屏幕消失时没有“剩余”。不要使用jQuery-如果确实要在$ scope。$ destroy上清理它。

3)大量指令:-指令功能强大,但不要过度使用-尽量不要嵌套太多指令。templateUrl是“诱人的”,但有时内联模板是最佳选择。使用将内联模板的构建工具。

4)使用requireJS按需加载模块。这将迫使您对应用程序进行模块化,并认真考虑可疑策略(合并JS文件)。将迫使您编写独立的模块。

5)浏览器缓存您的资产和良好的缓存清除机制。基于Grunt的插件可助您一臂之力。缩小您的资产。

6)压缩资产以提高网络利用率和传输速度。

7)将您的应用封装在Angular中。不要创建任何全局对象。可能是他们可以使用某些封闭方法,或者正在引用$ scope内的某些内容,而$ scopes现在仍然悬而未决或处在难以收集垃圾的轨迹中。

8)尽可能使用一次绑定或一次绑定模型绑定。

9)开机画面是一种出色的武器-我们使用它。帮助您在用户观看平滑/爵士图片/图片时预先加载一些内容:)

关于每天8小时的持续使用

除非存在以下类型的泄漏,否则您应该没问题:-1)监听器泄漏,即四处闲逛。2)DOM泄漏。分离的DOM问题。3)Javascript对象的大小。以某种方式编码的Javascript对象会创建函数的重复实例。

(我正在开发AngularJS应用程序-具有450多个屏幕-类似于MDI的应用程序。该应用程序尚未投入生产。以上几点来自我对迄今为止开发的功能的精疲力尽。)