大型AngularJS应用程序的页面加载性能问题

时间：2016-01-06 21:23:45

标签： javascript angularjs performance angularjs-directive angularjs-ng-template

我们正在开发相当大的AngularJS应用程序。目前，我们正在调查一些页面加载性能问题。我们的页面准备就绪需要一段时间。

其中一个原因（与其他常见的嫌疑人一样，如观察者太多）可能如下：

我们使用ngTemplates预加载所有指令模板。由于我们有如此多的指令（​​大约100个，我们喜欢声明性编程;-) ngTemplate JS文件大约是170KB，因此在页面加载时需要大约2秒来处理和解析（参见附加的火焰图表）。

如果我们禁用ngTemplates，感知的页面速度要好得多，因为Angular有更小的＆＃34;更小的＆＃34;要处理和显示的位。

但我认为在生产中，这些100次XHR调用加载指令模板是非常糟糕的做法。令人讨厌的是Angular甚至加载/解析实际上没有使用ngIf（AngularJS: Directive templates loading regardless of ng-if condition）呈现的指令模板。

我附上了我们页面加载的Chrome时间轴/火焰图的屏幕截图。您会注意到火焰图顶部有一个大的黄色条。如果我们不使用ngTemplates，这个栏将被分成更小的部分（这似乎导致更好的＆＃34;感知的页面速度＆＃34;）。

Chrome timeline/flame chart

你们中间有人有类似的问题吗？或者有关如何改善页面加载的任何输入？

我们感谢任何投入！

迈克尔

1 个答案:

答案 0 :(得分：4)

您面临的是SPA应用程序的缺点。

SPA框架通常会在最初加载时尝试提供快速流畅的体验 - 但是由于加载时间较差，因为它们通常首先加载所有文件。无论是否需要它们。 AngularJS本身不提供任何解决此问题的方法 （顺便说一句，除了Angular2，它提供了一些选项）

您有两种（既不完美）选项：

  1. 您可以尝试通过服务器端呈现登录页面来加快初始加载时间： https://github.com/runvnc/angular-on-server

  2. 我不确定这种方法是否真的有效，这只是我想到的一个想法，必须经过验证： 您可以尝试在ngTemplates方法上作弊： 最初使用一堆空模板填充Angular模板缓存 希望它应该比装载170k的模板更快。

    3. 之后找出您当前所在的页面并获取所需的模板并将其替换为缓存。 （也许是rootScope。之后需要$ digest（）吗？） 之后获取/更新所有剩余的模板。 这显然不是最干净的解决方案，但如果你敢于在这里提升性能并且服务器端渲染不是一个选项，它可能是“最后的机会”

相关问题
最新问题