CSS 動畫會不會被 JS 阻塞？

01-14

我寫了一個示例，裡面有兩個 CSS 動畫。一個是用 transform 實現，一個是用 left 實現。
當我執行示例里的 kill 函數時，transform 實現的動畫不會被阻塞，left 實現的動畫會被阻塞。

我感覺是和使用 left 需要重新計算布局有關。可是這又和 JS 有什麼關係呢？瀏覽器究竟是怎麼處理的？
CSS Animation blocked by js

kill 函數會阻塞主進程，阻止頁面 render，但是整個 transform 動畫被瀏覽器丟給 GPU 執行（GPU 加速），不會被阻塞。

transform 動畫（注意 Main 和 Rendering）:

而 left 的改變會引起瀏覽器重新布局，動畫受主進程式控制制。主進程被阻塞了，動畫就會停下來。

left 動畫:

找到了一篇文章，應該能解釋你的問題了：

http://www.phpied.com/css-animations-off-the-ui-thread/

總結來說，就是有的瀏覽器（safari和chrome等）把css animations移出了UI thread，所以css transform之類的css animation不會被js block了，而使用property的動畫還是會被阻塞（大概因為渲染引擎需要計算properties所以沒法被移出主線程？）。而沒有移出的瀏覽器則全部會被阻塞。

MDN上有另一篇文章可供參考https://developer.mozilla.org/en-US/Apps/Fundamentals/Performance/CSS_JavaScript_animation_performance

我在看薦的黑板報上看到了這個做法，對於動畫的每一幀；瀏覽器會計算元素的幾何形狀，渲染新狀態的圖像；並把它們發送給GPU。（你沒看錯，position也會引起瀏覽器重排的）儘管瀏覽器做了優化，在repaint時，只會repaint部分區域；但是我們的動畫仍然不夠流暢。

因為重排和重繪發生在動畫的每一幀，一個有效避免reflow和repaint的方式是我們僅僅畫兩個圖像；一個是a元素，一個是b元素及整個頁面；我們將這兩張圖片發送給GPU，然後動畫發生的時候；只做兩張圖片相對對方的平移。也就是說，僅僅合成緩存的圖片將會很快；這也是GPU的優勢——它能非常快地以亞像素精度地合成圖片，並給動畫帶來平滑的曲線。