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

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引擎无法优化该属性访问，除非它知道img中的offsetWidth和this.img.offsetWidth都是简单属性（不是访问者），当然在img元素的offsetWidth属性的情况下， 是一个访问者（因此导致重排）。