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