如何改善DOM渲染时间

Question

我们有非常复杂的Angular应用程序正在使用ui-router来切换视图。我们最近注意到切换视图可以产生300ms到1500ms的滞后。

我们消除了以下可能的原因：

• AJAX调用 - 数据已加载
• 异步html模板提取 - 我们使用的是html2js
• $ digest上的复杂逻辑 - profiler没有显示任何称为
的重函数
• 使用一次性绑定而不是双向绑定对初始渲染几乎没有影响

我们发现滞后很可能是由于在页面上渲染了太多DOM元素造成的。

除了显而易见的解决方案 - 减少渲染的DOM元素（保持相同的功能并不容易）我们可以做些什么来提高DOM渲染速度？

我们的观点主要由许多小指令组成。有没有办法异步渲染指令和DOM元素（不阻止UI）或在指令/视图的DOM树渲染时显示微调器？

Answer 1

如果你正在使用ng-hide / ng-show，一种方法可以让你的加载时间更快，那就是开始使用ng-if-if，这样那些DOM的部分只有在需要时才会加载，减少最初加载到页面的内容。

  

ngIf与ngShow和ngHide的不同之处在于，ngIf完全删除并重新创建DOM中的元素，而不是通过display css属性更改其可见性。这种差异很重要的常见情况是使用依赖于DOM中元素位置的css选择器，例如：first-child或：last-child伪类。

From Angular docs

Answer 2

不幸的是，渲染大量DOM节点对渲染时间影响最大​​。

与其他答案一样，不仅使用ng-if会向DOM添加更少的元素，而且附加到这些元素的任何指令或控制器都不会被编译，因此在某些情况下会有很大的提升。

否则，您应该专注于决定是否确实需要在页面上同时添加这么多元素。通常，它们并非全部可见。例如，如果页面非常高或者使用ng-repeat（世界着名的性能杀手），一种非常好的机制是使用“无限滚动”，这意味着您使用{{限制显示的节点数量例如，在limitTo的情况下，当用户向下滚动时，您会扩展此限制。

PS：谷歌Chrome（至少）非常善于分析导致延迟的原因，如果您从开发控制台启用时间轴并在完全加载后停止它。

PPS：检查你没有一个非常慢的观察者的一种方法是从开发者控制台运行这些行（用具有范围的节点替换主体）

ng-repeat

如果申请量很大，这个时间不会超过100-300毫秒。