javascript - 修改 DOM 元素和限制回流的最有效方法是什么？

Question

当使用具有潜在大型 JS 库、 View 模板、验证、ajax、动画等的非常动态的 UI(想想单页应用程序)时......有哪些策略可以帮助最大程度地减少或减少浏览器花费的时间回流焊？

例如，我们知道有很多方法可以完成 DIV 大小的更改，但是是否有应该避免的技术(从回流的 Angular 来看)以及浏览器之间的结果有何不同？

这是一个具体的例子:

给出了一个简单的示例，其中包含 3 种不同的方法来在调整窗口大小时控制 DIV 的大小，应该使用哪种方法来最大程度地减少回流？

http://jsfiddle.net/xDaevax/v7ex7m6v/

//Method 1: Pure Javascript
function resize(width, height) {
    var target = document.getElementById("method1");
    target.setAttribute("style","width:" + width + "px");
    target.setAttribute("style", "height:" + height + "px");
    console.log("here");
} // end function
window.onresize = function() {
    var height = (window.innerHeight / 4);
    var width = (window.innerWidth / 4);
    console.log(height);
    resize(height, width);
}
//Method #3 Jquery animate
$(function() {
    $(window).on("resize", function(e, data) {
        $("#method3").animate({height: window.innerHeight / 4, width: window.innerWidth / 4}, 600)
    });
});

Answer 1

最好尽可能避免更改 DOM 元素。有时，您可以通过坚持使用 CSS 属性或在需要时使用 CSS 的 transform 来完全防止重排，这样元素本身根本不受影响，而只是改变了视觉状态。 Paul Lewis 和 Paul Irish 在 this article 中详细说明了为什么会出现这种情况。 .

这种方法并非在所有情况下都适用，因为有时需要更改实际的 DOM 元素，但对于许多动画等，transforms 会带来最佳性能。

---

如果您的操作确实需要回流，您可以通过以下方式将其影响降至最低:

• 保持较小的 DOM 深度
• 保持 CSS 选择器简单(并将复杂的选择器保存到 JavaScript 中的变量)
• 避免内联样式
• 避免表格布局
• 尽可能避免使用 JavaScript

Nicole Sullivan 发布了 pretty good article关于浏览器回流和重绘的更多细节的主题。

如果您实际上是在更改 DOM，而不是 DOM 属性，最好以较大的 block 而不是较小的 block 来进行 like this Stack Overflow post建议。

---

在您提供的示例中，第二种方法最好，因为它使用 CSS 属性而不需要 JavaScript。浏览器非常擅长渲染尺寸和位置完全由 CSS 决定的元素。但是，使用纯 CSS 并不总能获得我们需要的元素。

到目前为止，最糟糕的方法是第三种方法，因为 jQuery 的动画开始时非常慢，但是在调整大小时启动它会使动画堆叠在彼此之上，因此如果您调整它的大小，它就会落后很多。您可以通过使用 bool 值设置超时来检查它是否已经被触发来防止这种情况，或者更优选地，根本不使用 jQuery 的动画来执行此操作，而是使用 jQuery 的 .css()因为 resize 函数触发得如此频繁，所以无论如何它看起来都是动画的。