javascript - Javascript html 回流计数

Question

我想知道优化一些像这样的简单代码是否值得：

var x1 = $div1.offset().left;
var y1 = $div1.offset().top;
var h1 = $div1.outerHeight(true);
var w1 = $div1.outerWidth(true);

我们要进行多少次回流？浏览器会将它们全部打包成 1 次回流还是会导致 4 次回流？

Answer 1

此代码最多可能导致 4 次回流。每当您进行必须计算的测量时，它都可能导致重排，例如访问 offsetWidth、clientHeight 或任何计算的 CSS 值，而 DOM 更改排队等待进行。话虽如此，某些浏览器可能会在幕后工作以避免在某些情况下发生多次回流。

除了我学到的一件事之外，除非您在测试时查看过导致严重性能问题的代码，否则不要过早进行性能优化。

要在没有看到更多代码的情况下回答您问题的另一部分，很难说它是否值得优化那一点，但很可能不是我所看到的那一点。虽然是我，但我会从一开始就这样写：

var offset = $div1.offset();
var x1 = offset.left;
var y1 = offset.top;
var h1 = $div1.outerHeight(true);
var w1 = $div1.outerWidth(true);