关注
7、css3动画transition和transform性能+原理:
动画性能对比 transition < transform ,position < translate,animation适合场景
transition做动画时两个线程的工作情况是:对于浏览器来说,元素的高度一直在变化,因此这个动画的每一帧都需要主线程对元素进行布局,绘制成位图,将位图交由GPU线程,GPU将位图绘制到屏幕。两个线程来回切换工作,即使是移动十几个像素,主线程也需要对元素布局很多次,这部分的工作消耗相当大,相对较慢,这也是transition动画经常卡顿的原因。
使用transform时浏览器的工作情况是:主线程对元素进行布局,绘制成位图,交由GPU线程,transform执行的整个过程都在GPU进程执行绘制,两个线程来回切换的情况不多,而且transform不会触发浏览器的重新排版,不会影响周围的布局,这也意味着这种情况的动画比transition流畅一些。
查看原帖
3 评论
相关推荐
牛客热帖
更多
正在热议
更多
# 不卡学历的大厂有哪些? #
10142次浏览 75人参与
# 顺丰求职进展汇总 #
52445次浏览 283人参与
# 校招阶段,学历VS技术哪个更重要? #
3282次浏览 39人参与
# 除了主业以外,你还有哪些其他收入? #
3952次浏览 69人参与
# 没有合适的工作,你会先找个干着,还是考公考研 #
120583次浏览 1142人参与
# 实习如何「偷」产出? #
17447次浏览 204人参与
# 职场新人体验 #
10935次浏览 114人参与
# 摸鱼被leader发现了怎么办 #
60115次浏览 368人参与
# 实习打杂,要跑路吗 #
9325次浏览 118人参与
# 校园里的破防时刻 #
5433次浏览 56人参与
# 风评不好的公司,你会去吗? #
42255次浏览 290人参与
# 社恐入职新公司如何融入团队 #
10262次浏览 62人参与
# 大学最后一个寒假,我想…… #
47675次浏览 580人参与
# 考研可以缓解求职焦虑吗 #
53058次浏览 472人参与
# 第一份工作应该选高薪还是热爱? #
77569次浏览 747人参与
# 你觉得早上几点上班合适? #
74595次浏览 311人参与
# 金融财经春招备战日记 #
22367次浏览 133人参与
# 一人推荐一个值得去的通信/硬件公司 #
188397次浏览 1867人参与
# 学历贬值真的很严重吗? #
27875次浏览 187人参与
# 软开人,秋招你打算投哪些公司呢 #
107412次浏览 975人参与