码上掌握
2023-03-14 17:07 拼多多集团-PDD_前端开发
关注
7、css3动画transition和transform性能+原理：
动画性能对比 transition < transform ，position < translate，animation适合场景
transition做动画时两个线程的工作情况是：对于浏览器来说，元素的高度一直在变化，因此这个动画的每一帧都需要主线程对元素进行布局，绘制成位图，将位图交由GPU线程，GPU将位图绘制到屏幕。两个线程来回切换工作，即使是移动十几个像素，主线程也需要对元素布局很多次，这部分的工作消耗相当大，相对较慢，这也是transition动画经常卡顿的原因。
使用transform时浏览器的工作情况是：主线程对元素进行布局，绘制成位图，交由GPU线程，transform执行的整个过程都在GPU进程执行绘制，两个线程来回切换的情况不多，而且transform不会触发浏览器的重新排版，不会影响周围的布局，这也意味着这种情况的动画比transition流畅一些。
查看原帖
3 评论
相关推荐
点赞 评论 收藏
分享
哔哩哔哩公司福利 291人发布 点赞 评论 收藏
分享
一天代码十万三：你看看人家进大厂的简历就知道了，你这个学历得acm+大厂实习+熟悉底层+运气很好 才有可能进某个大厂，因为大部分是直接卡学历的
投递快手等公司10个岗位 点赞 评论 收藏
分享
招联金融
| 实习
| 超多精选岗位
点赞 评论 收藏
分享
牛客热帖
更多
正在热议
更多
# 京东美团大战，你怎么看？ #
35743次浏览 234人参与
# 一觉醒来，我成论文导师了… #
4274次浏览 80人参与
# 平安产险科技中心求职汇总 #
244826次浏览 2613人参与
# 实习进度记录 #
174377次浏览 1990人参与
# 毕业论文怎么查AI率 #
4389次浏览 235人参与
# 读研or工作，哪个性价比更高？ #
53398次浏览 645人参与
# 哪个瞬间让你对大厂祛魅了？ #
284108次浏览 1968人参与
# 24届的你们都什么时候入职？ #
54682次浏览 420人参与
# 我的求职精神状态 #
6350次浏览 124人参与
# 海康威视求职进展 #
62221次浏览 349人参与
# 摸鱼打卡站 #
36320次浏览 668人参与
# 机械人还在等华为开奖吗？ #
210095次浏览 1084人参与
# 好未来求职进展汇总 #
7385次浏览 60人参与
# 大疆求职进展汇总 #
468978次浏览 3169人参与
# 如果公司降薪，你会跳槽吗？ #
60775次浏览 481人参与
# 大城市找工作会更容易吗 #
18335次浏览 137人参与
# 小红书求职进展汇总 #
49953次浏览 445人参与
# 金山WPS工作体验 #
22245次浏览 140人参与
# 第一份工作应该选择高薪还是大平台 #
128839次浏览 809人参与
# 大家每天通勤多久？ #
32179次浏览 246人参与
# 互联网行业现在还值得去吗 #
5647次浏览 38人参与