在requestAnimationFrame內部什麼不會導致重繪/迴流？

例如，如果我這樣做在requestAnimationFrame內部什麼不會導致重繪/迴流？

requestAnimationFrame(function() { 
    el.appendChild(otherEl) 
    el.appendChild(anotherEl) 
    anotherEl.removeChild(someOtherEl) 
    anotherEl.appendChild(yetAnotherEl) 
})

這是否會導致（同步？）重繪/期間，當我們試圖避免引起重繪/迴流焊時發生迴流，從而排尿的目的？

或者，瀏覽器是否會變得聰明，並等待該框架完成後（在所有這些DOM操作完成之後）才能最終繪製生成的DOM結構？

什麼是可以導致重繪/迴流的所有事情，並且我們希望避免在requestAnimationFrame內執行操作？

this html5rocks article中的樣式列表只提及當我們修改時會引起重繪/迴流的樣式。我也很想知道哪些JavaScript屬性（以及它們在哪個對象上）在訪問時會導致迴流（即發生迴流以便能夠獲得某個屬性的值）。

來源

2016-04-07 trusktr

你是否按照每幀的方式做這件事，即定期追加兒童？ –

@TahirAhmed不一定。這可能是每隔幾秒鐘，甚至可能不到一秒鐘。雖然，我不想對它施加限制。用例可以是任何東西（例如，在每一幀添加刪除元素以產生某種快速閃爍的效果）。 – trusktr

_adding每個frame_刪除元素_我認爲是太快，你會發現任何可見的東西，因爲瀏覽器往往會呈現每秒* 60 *幀。 –

這是否會導致（同步？）重繪在時間發生時，我們正在努力，以避免造成油漆，因而排尿 requestAnimationFrame的目的是什麼？

我不太明白你是第一個問題，但我會盡力回答它。

添加或刪除DOM中的元素會觸發迴流，而requestAnimationFrame是強制創建圖層的translateZ（0）或translate3d（0,0,0）技巧的正式版本。從這個意義上說，觸發迴流與使用rAF無關。你提到了「在我們試圖避免造成油漆的時候發生重畫」，我假設你指的是你應該實施的節流。如果我沒有正確回答，請告訴我。

或者，將瀏覽器是聰明，等到該幀是完成（所有這些DOM操作完成後），以終於畫所產生的DOM結構？

鑑於您所有的追加和刪除操作都在同一個rAF調用中，瀏覽器（據我瞭解）應該將它們全部繪製在一個框架中。

什麼是可能導致重繪/迴流的事情，並且我們想要避免在requestAnimationFrame內執行操作？

重繪由任何引起可見性變化的事件觸發，但不影響佈局。不透明度不會觸發重繪，因此動畫製作便宜得多。

迴流會影響整個頁面或部分頁面的佈局，從而導致重新計算受影響元素的大小和位置，因此應該在動畫中避免。翻譯，旋轉和縮放然而不會觸發迴流。

您可以閱讀更多關於此here並獲得觸發佈局和重繪的css屬性列表。

最後，爲了清除最後一個問題，重新繪製和佈局會發生，無論它們是否在rAF內部或外部。要時刻銘記在心。

來源

2016-04-21 01:40:58

我相信我的意思是「重繪和/或迴流」，而不僅僅是重繪我感興趣的東西。迴流導致重繪權，因爲事情已經重新佈置，他們需要重新繪製，我會想。所以，我想我很想知道是什麼原因導致迴流（佈局）。 – trusktr

這是一個很好的觸發迴流（佈局）的列表。但是，這篇文章沒有提到哪些東西不能閱讀，在閱讀屬性導致迴流，以確定正在閱讀的財產的價值。 – trusktr

@trusktr我不知道任何會觸發重讀的屬性，特別是讀取屬性不影響它們在DOM中的樣式。就我而言，所有的屬性都存儲在對象的原型中，並從那裏檢索。也許你指的是抖動我們請求樣式值，更改值，請求值，更改值等，以導致強制同步佈局？而且佈局會導致重繪，所以它對動畫性能特別重要。基本上保持旋轉，平移，縮放和不透明度以保證安全。 –

在requestAnimationFrame內部什麼不會導致重繪/迴流？

回答

相關問題