SS 工具箱
所有数据均在本地处理

动画性能进阶实验

验证:当 transform 混合了触发重排的属性(如 width)时,是否还能在阻塞中运行?

A. 纯 Transform (独立线程)

只操作 transform,主线程卡死时它【不会停】。

B. Transform + Width (混合)

Mixed

同时操作 transform 和 width,主线程卡死时它【会停】。

C. JavaScript (rAF)

完全依赖主线程,必停。

D. 纯 Margin (布局重排)

涉及重排,必停。

原理总结

浏览器就像一家工厂。**合成器线程**是专门负责搬运和旋转箱子的工人;而**主线程**是负责测量尺寸并制造箱子的工程师。

  • 如果只需要旋转(A),搬运工可以自己搞定。
  • 如果要一边旋转一边改尺寸(B),搬运工每转一下都得回头问工程师:"现在尺寸是多少?"
  • 如果工程师(主线程)忙得不可开交,搬运工就只能在那原地等工程师回话,动画也就卡住了。
相关工具