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