在谈动画性能在此之前,先介绍一些概念。

帧率(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 中,并透过重新复合来生成一个新的帧。

2018正版葡京赌侠诗,假诺图层中某个元素需要重绘,那么整个图层都急需重绘。

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地图