我写了一个示例,里面有两个 CSS 动画。一个是用 transform
实现,一个是用 left
实现。
当我执行示例里的 kill
函数时,transform
实现的动画不会被阻塞,left
实现的动画会被阻塞。
我感觉是和使用 left
需要重新计算布局有关。可是这又和 JS 有什么关系呢?浏览器究竟是怎么处理的?
我写了一个示例,里面有两个 CSS 动画。一个是用 transform
实现,一个是用 left
实现。
当我执行示例里的 kill
函数时,transform
实现的动画不会被阻塞,left
实现的动画会被阻塞。
我感觉是和使用 left
需要重新计算布局有关。可是这又和 JS 有什么关系呢?浏览器究竟是怎么处理的?
10 回答11.1k 阅读
6 回答2k 阅读✓ 已解决
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
答案是有时会,有时不会。
首先JS线程是运行在UI线程里大家都知道。如果JS让线程阻塞了按理说CSS动画也会阻塞住,但是因为现代浏览器的优化,很多CSS动画使用了GPU加速。这种技术叫做Off main thread animation,transfrom属性就是其中之一
这里有一些介绍。