Angular指令导致加载时间过长

Question

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

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

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

谢谢，

Answer 1

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

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

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

Answer 2

你的问题

  

我的问题是指令编译必须花费那么长时间吗？

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

  

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

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

你的第二个问题

  

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

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

你的第三个问题

  

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

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

你的最后一个问题。这是一个很长时间的折磨我的事实。我也不知道为什么。