requestAnimationFrame（回调）时会发生什么;改变图像的宽度？重画还是回流？

Question

我已经阅读了一些关于回流和修复的主题，这是我想要理解的内容。

  

对元素外观进行更改时会发生重绘   改变可见性，但不影响其布局。

     

对元素布局进行更改时会发生重排。

无论如何，何时

  

window.requestAnimationFrame（回调）;

更新所选图像元素，更改重绘或重排的宽度。 在MDN中，回调参数被区分为：

  

一个参数，指定在下次重绘时更新动画时要调用的函数。

那么毕竟发生了什么，重排或重新粉刷？

这是我的问题的一个例子：

var jediImg = document.getElementById('jedi-image');
jediImg.src = 'images/jedi-image.jpg';
jediImg.width = 400;

var times = 20,
  update = -1;

var isJediVisible = true;

function animationFrame() {
  if (isJediVisible) {
    jediImg.width = 0;
  } else {
    jediImg.width = 400;
  }
  isJediVisible = !isJediVisible;

  jediImg.width = (20 - times) * 50;
  times += update;
  if (times === 0) {
    update = 1;
  }
  if (times == 20) {
    update = -1;
  }
  requestAnimationFrame(animationFrame);
}
animationFrame();

感谢您的回答。

Answer 1

width的变化将触发回流和油漆。详细了解触发器here。