在谈动画性能在此之前,先介绍部分定义。

帧率(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的一部分动画优化库)

参考

进展阅读

相关文章

网站地图xml地图