javascript - 如何提高 DOM 渲染时间

Question

我们有一个非常复杂的 Angular 应用程序，它使用 ui-router 来切换 View 。我们最近注意到切换 View 会产生 300 毫秒到 1500 毫秒的延迟。

我们排除了以下可能的原因:

• AJAX 调用 - 数据已加载
• 异步 html 模板获取 - 我们正在使用 html2js
• $digest 上的复杂逻辑 - 探查器没有显示调用任何繁重的函数
• 使用一次性绑定(bind)而不是双向绑定(bind)对初始渲染几乎没有影响

我们发现延迟很可能是由于在页面上渲染过多的 DOM 元素造成的。

除了显而易见的解决方案 - 减少渲染的 DOM 元素(这在保持相同功能的情况下不容易做到)我们可以做些什么来提高 DOM 渲染速度？

我们的 View 主要由许多小指令组成。有没有办法异步呈现指令和 DOM 元素(不阻塞 UI)或在呈现指令/ View 的 DOM 树时显示微调器？

Answer 1

如果您使用 ng-hide/ng-show 来加快加载时间，一种方法是专门切换到 ng-if，这样 DOM 的那些部分只会在需要时加载，从而减少加载的内容最初到页面。

ngIf differs from ngShow and ngHide in that ngIf completely removes and recreates the element in the DOM rather than changing its visibility via the display css property. A common case when this difference is significant is when using css selectors that rely on an element's position within the DOM, such as the :first-child or :last-child pseudo-classes.

From Angular docs