如何写出高性能的CSS3动画
小伙伴们在写CSS3动画时，会发现在手机上很多时候会感到卡顿，然后Google到的解决方案大多是开启GPU加速transform: translate3d(0,0,0); 可解决，但是为什么开启GPU加速就能让动画顺滑呢?
我们从浏览器内部去理解下
Main Thread 主线程
Compositor Thread 绘制线程
主线程的工作：
运行JS
计算 HTML 元素的 CSS 样式
布局页面
将元素绘制到一个或多个位图中
把这些位图交给 Compositor Thread 来处理
绘制线程的工作：
通过 GPU 将位图绘制到屏幕上
通知主线程去更新页面中可见或即将可见的部分的位图
计算出页面中那些部分是可见的
计算出在滚动页面时候，页面中哪些部分是即将可见的
滚动页面时将相应位置的元素移动到可视区
GPU 在如下方面很快：
绘制位图到屏幕上
可不断的绘制相同的位图
将同一位图进行位移、旋转、缩放 （就是动画）
但是在将位图加载到GPU内存中有点慢
关于两张图的正题来了
div {
height: 100px;
transition: height 1s linear;
}
div:hover {
height: 200px;
}
使用 transform 属性的动画
div {
transform: scale(0.5);
transition: transform 1s linear;
}
div:hover {
transform: scale(1.0);
}
chrome中执行对比
原文作者：@ccforward
原文链接：https://github.com/ccforward/cc/issues/42
原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
服务热线 19970861797
