0

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

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

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

4

1 回答 1

0

此代码最多可能导致 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);
于 2015-10-20T19:44:15.037 回答