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