动画性能
liangklfang
https://github.com/liangklfangl
展开
-
Chromium网页渲染机制简要介绍和学习计划
作为一个浏览器,快速地将网页渲染出来是最重要的工作。Chromium为了做到这一点,费尽了心机,做了大量优化工作。这些优化工作是卓有成效的,代表了当今最先进的网页渲染技术。值得一提的是,这些渲染技术不仅适用于网页渲染,也可以应用在原生系统的UI渲染上。例如,在Android系统上,我们就可以看到两者在渲染技术上的相似之处。本文接下来就对Chromium的网页渲染机制进行简要介绍,并且制定学习计划。转载 2016-06-12 20:54:59 · 908 阅读 · 0 评论 -
我们来看看chrome控制台动画的性能
问题1:我们使用left/top来看看动画的性能 body { padding: 30px; text-align: center; } .container { position: relative; min-height: 400px; -webkit-tap-highlight-color: rgba(0,0,0,0); } .ball { position: a原创 2016-06-13 10:55:47 · 3865 阅读 · 0 评论 -
GPU硬件加速的那些优秀的资源总结-续
那么为什么一个renderlayerbacking对象需要那么多层? 原因有很多,例如webkit需要将滚动条独立开来称为一个层,需要两个容器层来表示renderlayer对应的z坐标为正数和z坐标为负数的子女,需要滚动的内容建立新层,还可能需要剪裁层和反射层,这些层绘制和组织的顺序如下图(图中每一个层就是一个graphiclayer对象):原创 2016-06-11 21:22:18 · 3095 阅读 · 0 评论 -
遇到的那些必须弄清楚的关于高性能动画的知识点
问题1:60Hz和60fps有什么关系? 没有任何关系。fps代表GPU渲染画面的频率,Hz代表显示器刷新屏幕的频率。一幅静态图片,你可以说这副图片的fps是0帧/秒,但绝对不能说此时屏幕的刷新率是0Hz,也就是说刷新率不随图像内容的变化而变化。游戏也好浏览器也好,我们谈到掉帧,是指GPU渲染画面频率降低。比如跌落到30fps甚至20fps,但因为视觉暂留原理,我们看到的画面仍然是运动和连贯的。原创 2016-06-28 11:52:27 · 1829 阅读 · 0 评论 -
高性能动画设计的一些优化思路总结
问题1:关注JS的垃圾回收对动画性能的影响 Javascript没有显式的内存管理,这就意味着你创建了对象但是你没有释放他们,久而久之,浏览器就会去清理这些对象。这时候动画执行就会停止,浏览器会识别那些内存依然在使用,然后释放其它的内存空间。而且这种多余的垃圾都是逐渐被创建,然后一起被清理的。在60fps的动画上,每一帧只有16ms的绘制时间,但是垃圾回收却会100ms或者更长,这样就会导致明显原创 2016-06-21 23:08:35 · 1552 阅读 · 0 评论