SS 工具箱
SS 工具箱
所有資料均在本機處理

動畫效能進階實驗

驗證:當 transform 混合了觸發重排的屬性(如 width)時,是否還能在阻塞中執行?

A. 純 Transform (獨立執行緒)

只操作 transform,主執行緒卡死時它【不會停】。

B. Transform + Width (混合)

Mixed

同時操作 transform 和 width,主執行緒卡死時它【會停】。

C. JavaScript (rAF)

完全依賴主執行緒,必停。

D. 純 Margin (佈局重排)

涉及重排,必停。

原理總結

瀏覽器就像一家工廠。**合成器執行緒**是專門負責搬運和旋轉箱子的工人;而**主執行緒**是負責測量尺寸並製造箱子的工程師。

  • 如果只需要旋轉(A),搬運工可以自己搞定。
  • 如果要一邊旋轉一邊改尺寸(B),搬運工每轉一下都得回頭問工程師:"現在尺寸是多少?"
  • 如果工程師(主執行緒)忙得不可開交,搬運工就只能在那原地等工程師回話,動畫也就卡住了。
相關工具
SponsorMindElixir