Web动画性能介绍

在谈动画性能往日,先介绍部分定义。

帧率(FPS)

帧率(FPS):描述每秒播放的帧数,单位为 Hz 或者 frame/s (帧/秒)。

力排众议上说,FPS越高,动画会越流畅,不过,因为大部分的突显器刷新频率是
60Hz,当动画的FPS超越 60Hz
时,会现出镜头撕裂此情此景(显示器会把七个或更多的帧显示在同一画面上)。所以平常来讲
FPS 为 60frame/s
时动画效果最好,也就是每帧16.67ms,在浏览器中要减去渲染时间1ms左右,得到的结果是每帧时间大概15ms。

假诺用 setInterval 来做动画,每帧时间大约设置成13ms(jQuery 用的
13ms)。因为用 setInterval
会有1ms左右的延时。当然在高档浏览器中,当然是用 requestAnimationFrame
来做动画啦。

在Chrome中查阅帧率

在Chrome中查看帧率

网页不同帧率的经验

  • 帧率可以达到50~60fps的卡通将会一定流畅,让人感觉到舒服。
  • 帧率在30~50fps之间的动画片,因各人敏感程度不等,舒适度同仁一视。
  • 帧率在30fps以下的动画片,令人深感到明确的卡顿和不适感。
  • 帧率波动很大的动画,亦会使人备感到卡顿。

动画片的通畅程度有所的特点

  • 帧率高(接近60fps最佳)
  • 帧率稳定,波动少(极少出现跳帧现象)

浏览器从DOM到渲染到页面上的长河

浏览器在渲染一个页面时,会将页面分为很五个图层,图层有大有小,每个图层上有一个或五个节点。在渲染DOM的时候,浏览器所做的劳作实际是:

  1. 取得 DOM 并将其分割为四个层
  2. 将各类层独立的绘图进位图中
  3. 将层用作纹理上传至 GPU
  4. 复合两个层来扭转最后的屏幕图像

当 Chrome 第一次为一个 web
页面创设一个帧(frame)时,以上步骤都亟需举行。但对于随后出现的帧可以走些捷径:

  • 倘诺某些特定 CSS 属性变化,并不需要暴发重绘。Chrome
    可以运用已经作为纹理而留存于 GPU
    中的层来重新复合,但会选择不同的复合属性(例如,现身在不同的职务,拥有不同的透明度等等)。
  • 比方层的片段失效,它会被重绘并且重新上传。假使它的情节保持不变然而复合属性爆发变化(例如,层被转正或透明度暴发变化),Chrome
    可以让层保留在 GPU 中,并通过重新复合来生成一个新的帧。

假诺图层中某个元素需要重绘,那么任何图层都需要重绘。

Chrome 中,图层分为 RenderLayer(负责 DOM 子树),GraphicsLayer(负责
RenderLayer 的子树)。
唯有 GraphicsLayer 是作为纹理(texture)上传给 GPU 的。

硬件加速

凭借显卡的优势改变了渲染格局,被称为硬件加速(hardware acceleration)。

变更了渲染模式是指,对硬件加速的因素以transform的不二法门开展位移(translate)、旋转(rotate)、缩放(scale)时,那几个操作会由GPU来处理,而不会接触浏览器的重绘(CPU处理)。

优化措施

减弱重绘和重排

具体见 Rendering: repaint, reflow/relayout,
restyle

使用硬件加速

转变复合层(composited layer/GraphicsLayer)的法门。
对此一般元素(除去Video,iframe,Flash等插件),通过安装

  • transform:translate3d, translate 或perspective(透视)属性
  • position:fixed
    可以生成复合层(composited
    layer)。对复合层用设置transform的法子开展位移(translate)、旋转(rotate)、缩放(scale)将不会接触浏览器重绘,这有的工作会由GPU来处理。
    瞩目:如若对复合层用设置margin,padding或left,top来开展位移,width,height来展开缩放如故会触发浏览器重绘。

据说,Firefox和IE会硬件加速所有的因素

用CSS3动画时,使用绘图效能相比高的特性

  • 转移地点
  • 更改大小
  • 旋转
  • 改变透明度(透明度改变不会触发重绘哦)

在chrome浏览器中查看复合层的措施为

翻开复合层的艺术为

页面上的复合层会有香艳边框。

待续(Canvas,SVG里做动画的频率,JS的一对卡通优化库)

参考

展开阅读

发表评论

电子邮件地址不会被公开。 必填项已用*标注