Javascript html reflow count

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