角指令导致加载时间长答案

【问题标题】：Angular directives causing long load times角指令导致加载时间长
【发布时间】：2015-10-29 19:31:18
【问题描述】：

我们目前有一个使用 Angular (1.3) 构建的大型复杂应用程序。我有一个可能使用 20 个自定义指令（嵌套）的页面。我发现加载时间（角度引导）非常慢，尤其是在 android 上。使用 chrome 时间线分析我可以看到角度引导在桌面上大约需要 800 毫秒，但在 android 上大约需要 8 秒（使用远程调试）。这是在相当新的安卓手机（三星 s5）上。但是在 iPhone 5 上（不超过 4 秒。

我的问题是指令编译需要那么长时间吗？我不认为我的指令链接函数实际上需要很长时间才能执行。用 ng-include/ng-controller 的组合替换指令会变得更好吗？用一个大指令替换 20 个指令会有所不同吗？

为什么移动版 chrome 浏览器的性能不如 iOS Safari 浏览器和非常相似的硬件？

谢谢，

【问题讨论】：

标签： angularjs

【解决方案1】：

你的第一个问题

我的问题是指令编译需要那么长时间吗？

没有。根据我的经验，Angularjs 可以快速处理超过 20 个自定义指令。

我不认为我的指令链接函数实际上需要很长时间才能执行。

我认为您可能会遇到问题并且可能需要花时间进行优化。可能是过多的 DOM 操作或 HTML 重排。

你的第二个问题

用 ng-include/ng-controller 的组合替换指令会更好吗？

我不这么认为。 ng-include/ng-controller 也是指令。没有本质区别。

你的第三个问题

用一个大指令替换 20 个指令会有所作为吗？

没有。指令的数量无关紧要。重要的是指令的作用。

还有你的最后一个问题。这是一个让我痛苦和折磨很久的事实。我也不知道为什么。

【讨论】：

我会检查我的指令是否有任何 HTML 重排，但我认为这将是最小的。而且我知道 DOM 操作很少。模板非常大，确实包含很多标记，包括嵌套指令。我认为这可能就是为什么编译需要很长时间的原因，因为角度编译阶段必须遍历所有内容才能提取所有指令进行编译？当我说“长”时，我的意思是大约 1-2 秒用于编译 - 不考虑“链接”阶段，因为我可以推迟与 ng-if 的链接。
我简直不敢相信编译阶段在 Android 上会花费这么长时间（1-2 秒），而我认为这是最少数量的指令。

【解决方案2】：

这可能是由于浏览器为呈现您的网站而发出的大量请求。每个指令都有一个模板，因此在所有其他指令（js 文件、图像、css 等）之上有 20 个请求。您还必须考虑每个指令/模板是在加载其父指令/模板时加载的，因为它们是嵌套的，这会对性能产生巨大影响。

它在桌面上的加载速度也可能更快，并且根据浏览器的同时连接限制在移动设备上有所不同。我相信 iOS safari 是 6，而移动版 chrome 是 4。

您需要减少模板加载量，并确保您正在使用浏览器缓存。在您的情况下，结合一些指令来提高性能可能会更好。

【讨论】：

不，我们将所有模板放在一个文件中，该文件会提前放在页面上。