CSS 动画会不会被 JS 阻塞?

我写了一个示例,里面有两个 CSS 动画。一个是用 transform 实现,一个是用 left 实现。

当我执行示例里的 kill 函数时,transform 实现的动画不会被阻塞,left 实现的动画会被阻塞。

我感觉是和使用 left 需要重新计算布局有关。可是这又和 JS 有什么关系呢?浏览器究竟是怎么处理的?

http://codepen.io/tanbowensg/...

阅读 5.2k
4 个回答

答案是有时会,有时不会。

首先JS线程是运行在UI线程里大家都知道。如果JS让线程阻塞了按理说CSS动画也会阻塞住,但是因为现代浏览器的优化,很多CSS动画使用了GPU加速。这种技术叫做Off main thread animation,transfrom属性就是其中之一

这里有一些介绍。

新手上路,请多包涵

没仔细考虑,不过transform用的是图形加速性能会快些,而left不是而且在页面过渡时容易卡顿

好不夸张的说我用眼睛看都知道1,2的动画方案,看源码果真如此

我觉得大概是left的改变触发了reflow,而transform仅仅是repaint

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题