javascript - 是否需要分配此变量才能触发重绘？

Question

在浏览器中访问某些属性会导致重绘/回流(参见 https://gist.github.com/paulirish/5d52fb081b3570c81e3a )。我想知道是否有必要为它分配变量以导致重排:

this.forceRepaint = function() {
  var _ = this.img.offsetWidth;
};

或者我可以直接返回(或做一些更短的事情)吗？因为将它分配给一个未使用的变量似乎没有用。

Answer 1

将您读取的值分配给变量与用它做其他事情并没有什么神奇之处。回流是由读取值引起的，而不是你用它做什么。

如你所说，你可以返回:

this.forceRepaint = function() {
  return this.img.offsetWidth;
};

...但您可能甚至不需要这样做；只需离开属性访问:

this.forceRepaint = function() {
  this.img.offsetWidth; // Yes, this really is a valid statement
};

作为Bergi points out ，JavaScript 引擎无法优化该属性访问，除非它知道 this.img.offsetWidth 中的 img 和 offsetWidth 都很简单属性(不是访问器)，当然对于 img 元素的 offsetWidth 属性，它是访问器(因此导致回流) .