requestAnimationFrame（callback）;會發生什么？ 改變圖像的寬度？ 重塗或重塗？

Question

我已經閱讀了一些有關重排和重排的主題，這是我要理解的內容。

當對元素外觀進行更改以更改可見性但不影響其布局時，就會發生重新繪制。

對元素布局進行更改時會發生重排。

反正什么時候

window.requestAnimationFrame（callback）;

更新選定的圖像元素，更改其寬度，從而發生重新繪制或重排。 在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變化將觸發回流和上漆。 在此處查看有關觸發器的更多信息。