大型 AngularJS 应用程序的页面加载性能问题
Mic*_*ker 3 javascript performance angularjs angularjs-directive angularjs-ng-template
我们正在开发一个相当大的 AngularJS 应用程序。目前我们正在调查一些页面加载性能问题。我们的页面准备就绪需要相当长的时间。
原因之一（以及其他常见的嫌疑人，例如观察者过多）可能如下：
我们使用 ngTemplates 来预加载所有指令模板。由于我们有如此多的指令（大约 100 个，我们喜欢声明式编程；-），ngTemplate JS 文件大约 170KB，因此在页面加载时需要大约 2 秒的时间来处理和解析（请参阅随附的火焰图）。
如果我们禁用 ngTemplates，感知的页面速度会好得多，因为 Angular 有“更小的”位来处理和显示。
但我认为在生产中执行这 100 个 XHR 调用来加载指令模板是非常糟糕的做法。烦人的是，Angular 甚至加载/解析实际上并未使用 ngIf 渲染的指令模板（AngularJS：无论 ng-if 条件如何加载指令模板）。
我附上了页面加载的 Chrome 时间线/火焰图的屏幕截图。您会注意到火焰图顶部有一个大的黄色条。如果我们不使用 ngTemplates，这个栏将被分成更小的部分（这似乎会导致更好的“感知页面速度”）。
你们中有人有类似的问题吗？或者对我们如何改进页面加载有任何意见？
我们感谢任何意见！
迈克尔
您面临的是 SPA 应用程序的缺点。
SPA 框架通常会在最初加载时尝试提供快速、流畅的体验 - 但代价是加载时间更差，因为它们通常首先加载所有文件。无论是否需要它们。AngularJS 本身没有为这个问题提供任何解决方案（顺便说一句，Angular2 除外，它确实提供了一些选项）
您有两个（都不完美）选择：
您可以尝试通过登陆页面的服务器端渲染来加快初始加载时间： https: //github.com/runvnc/angular-on-server
我不确定这种方法是否真的有效，这只是我刚刚想到的一个想法，需要验证：您可以尝试在 ngTemplates 方法上作一点欺骗：最初用一堆空的模板填充 Angular 模板缓存模板有望比加载 170k 价值的模板更快。
之后找出您当前所在的页面并获取所需的模板并将其替换到缓存中。（也许之后 rootScope.$digest() 是必要的？）之后获取/更新所有剩余的模板。这显然不是最干净的解决方案，但如果您敢于在这里需要性能提升并且服务器端渲染不是一个选项，那么它可能是“最后的机会”