两张图 揭示 CSS动画卡顿问题
2016-09-22 14:36
176 查看
两张图解释CSS动画的性能
在手机上使用CSS动画时很多时候会感到卡顿,然后网上很多教程说开启GPU加速 transform: translate3d(0,0,0);可解决,但是为什么开启GPU加速就能让动画顺滑呢?
我们从浏览器内部去理解下
JS是单线程的,但是浏览器可以开启多个线程,渲染一个网页需要两个重要的线程来共同完成:Main Thread 主线程
Compositor Thread 绘制线程(我自己翻译的)
主线程的工作:
运行JS计算 HTML 元素的 CSS 样式
布局页面
将元素绘制到一个或多个位图中
把这些位图交给 Compositor Thread 来处理
绘制线程的工作:
通过 GPU 将位图绘制到屏幕上通知主线程去更新页面中可见或即将可见的部分的位图
计算出页面中那些部分是可见的
计算出在滚动页面时候,页面中哪些部分是即将可见的
滚动页面时将相应位置的元素移动到可视区
我们知道如果长时间的执行 JS 会阻塞主线程,页面就会出现各种的卡顿。
而绘制线程会尽量的去响应用户的交互,页面发生变化时,绘制线程会以每秒60帧(因为每秒60帧是最适合人眼的交互,小于60就会明显感觉到卡顿了)的间隔不断重绘页面。
GPU 在如下方面很快:
绘制位图到屏幕上
可不断的绘制相同的位图
将同一位图进行位移、旋转、缩放 (就是动画)
但是在将位图加载到GPU内存中有点慢
关于两张图的正题来了
PS: 橙色方框的操作比较耗时,绿色方框的操作比较快速CSS
12345678 | div { height: 100px; transition: height 1s linear;} div:hover { height: 200px;} |
height: 100px到
height: 200px的动画按照下面的流程图来执行各种操作
图中有那么多的橙色方框,浏览器会做大量的计算,动画就会卡顿。因为每一帧的变化浏览器都在进行布局、绘制、把新的位图交给 GPU 内存(这恰好是我们上面提到的GPU的短板)虽然只改变元素高度但是很可能要同步改变他的子元素的大小,那浏览器就要重新计算布局,计算完后主线程再来重新生成该元素的位图。
使用 transform 属性的动画
CSS1 2 3 4 5 6 7 8 | div { transform: scale(0.5); transition: transform 1s linear; } div:hover { transform: scale(1.0); } |
很明显,这么少的橙色方框,动画肯定会流畅。
因为
transform属性不会改变自己和他周围元素的布局,他会对元素的整体产生影响。
因此,浏览器只需要一次生成这个元素的位图,然后动画开始时候交给 GPU 来处理他最擅长的位移、旋转、缩放等操作。这就解放了浏览器不再去做各种的布局、绘制等操作。
chrome中执行对比
把上面的demo代码在浏览器中执行下看下效果,demo地址:http://ccforward.github.io/demos/css/animation.html
transition: height 1s linear
transform: scale(1.0)
同样是改变大小的 scale 动画参考信息:
http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/
相关文章推荐
- 导航控制器在pushViewController时的动画卡顿问题
- 首次进入Activity、动画卡顿问题的解决方案
- 【问题】jQuery中的animate和CSS中的动画及其回调函数的问题
- 导航控制器在pushViewController时的动画卡顿问题
- css ios H5页面web页面 上下滑动卡顿问题解决方案
- 进入Activity、动画卡顿问题的解决方案
- [RK3288][Android6.0] 调试笔记 --- 播放GIF动画卡顿问题
- 解决 iOS webkit 使用CSS动画时闪烁的问题
- android activity刚打开时内部动画卡顿问题
- CSS 动画性能比较问题
- 两张图解释CSS动画的性能
- css ios H5页面web页面 上下滑动卡顿问题解决方案(亲测)
- jquery重新播放css动画所遇问题解决
- 两张图解释CSS动画的性能
- android旋转动画卡顿问题
- 解决动画卡顿问题
- DIV+CSS布局的一个小问题的解决
- 解决RD2作业在IE和Fire Fox中CSS效果不同的问题~
- CSS中常见的问题!