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