5

当使用具有潜在大型 JS 库、视图模板、验证、ajax、动画等的非常动态的 UI（想想单页应用程序）时，有哪些策略可以帮助最小化或减少浏览器在重排上花费的时间？

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

这是一个具体的例子：

举一个简单的例子，在调整窗口大小时控制 DIV 大小的 3 种不同方法，应该使用哪些方法来最小化回流？

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)
    });
});
4

1 回答 1

6

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

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

如果您的操作确实需要回流，您可以通过以下方式最小化它的影响：

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

Nicole Sullivan 就该主题发表了一篇相当不错的文章，其中详细介绍了浏览器重排和重绘。

如果您实际上是在更改 DOM，而不是 DOM 属性，那么最好以较大的块而不是像 Stack Overflow 帖子所建议的那样较小的块来进行。

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

到目前为止，最糟糕的方法是第三种方法，因为 jQuery 的动画开始时非常慢，但是让它在调整大小时触发会使动画堆叠在一起，所以如果你调整它的大小它会落后很多。您可以通过使用布尔值设置超时来检查它是否已经被触发来防止这种情况.css()发生反正动画。

于 2014-09-26T15:45:50.593 回答