动画做多了，天然就要斟酌机能，我打算出一个系列的日记，细致的解说一下网页动画机能相干的学问，假如你已可以运用css3 canvas来做动画，可以来参考一下。
<!–more–>
如今我做的最庞杂的动画就是360搜刮中PC端的天色动画。
<img src=”https://static.imwineki.cn/st…; width=”300″ height=”200″>
共包含14个动画场景，每一个场景基础由1-3个自力的动画叠加而成，笼统动画共12个，从开发到优化完成共分为四期完成，一二期一切的动画均运用canvas完成，三期四期对动画机能举行大幅度革新，重构了部份代码。个中兼容低倍屏、高倍屏，canvas绘制的折线图浏览器兼容到IE6（详细完成拜见：基于canvas折线图统计图），动画兼容到IE9，低版本浏览器动画显现静态图片。所以以下我一切剖析均依赖于该项目。
量化流通的动画
起首我们先来简朴的引见一下动画道理，实在动画自身是不动的，它的完成道理是利用人眼的“视觉暂留”征象，在段时候内一连播放数副细腻的画面，使肉眼银视觉残象发作错觉，而发作“动”的观点。
相干观点
<li>帧 （Frame）：在动画历程当中，每一幅静止画面即为一“帧”。
<li>帧率（Frame per second）：即每秒钟播放的静止画面的数目，单位是fps(Frame per second)。
<li>帧时长：每一幅静止画面的停留时候，单位平常是ms(毫秒)。
<li> 跳帧(掉帧/丢帧)：在帧率牢固的动画中，某一帧的时长远高于均匀帧时长，致使其后续数帧被挤压而丧失的征象。
一般状况下浏览器衬着革新频次稳定在60fps摆布，人眼是可以看到流通腻滑的动画的，平常来讲低于30fps的动画，就会有卡顿。
工欲善其事必先利其器
来相识一下，怎样运用chrome这把芒刃。
FPS Meter
运用这个东西你可以检测当前浏览器GPU衬着动画的帧率。
- ✔️ 高亮网页中须要重绘的地区
- ✔️ 将须要重回的地区用橘黄色的边框标注
- ✔️ 绘制帧率，帧速度散布，以及GPU 缓存
- ✔️ 展现页面中减慢转动的地区
- ✔️ 强迫媒体范例来测试绘制和屏幕衬着
<img src=”https://static.imwineki.cn/st…; width=100 height=80>
固然以上只能在chrome中举行调试，假如你想在其他的浏览器FPS的检测，你可以运用stats.js，侦听全局或指定位置的帧率，JS完成，一切浏览器可用。
Timeline
详细运用体式格局可以参考：chrome官方文档
profiles
taskmanager
浏览器内核
各厂出品的浏览器所用的衬着引擎不尽雷同： IE运用Trident ，FireFox运用Gecko ，Safari运用WebKit ，Chrome 28+ 和 Opera 15+运用的是Blink（WebKit的分支）
当代的浏览器一般会有两个重要的实行线程，这2个线程协同事变来衬着一个网页：
<li>主线程
<li>合成线程
平常状况下，主线程担任：
<li>运转js
<li>盘算HTML元素的css款式
<li>页面规划layout
<li>将元素绘制到一个或多个位图中
<li>将这些位图交给合成线程
合成线程担任：
<li>经由历程GPU将位图衬着到屏幕
<li>关照主线程更新页面中可见或行将变成可见的部份的位图
<li>盘算页面中可见部份
<li>盘算出当你在转动页面时哪部份是行将变成可见的
<li>当你转动页面时将相应位置的元素移动到可视地区
长时候实行 JavaScript 或衬着一个很大的元素会壅塞主线程，在这时候期，它将没法相运用户的交互。
相反，合成线程则会只管去相运用户的交互。当一个页面发作变化时，由于现今大多数装备的屏幕革新率都是 60次/秒，所以合成线程也会以每秒60 帧的间隔去不停重绘这个页面，纵然这个页面不完整。
当用户转动页面时，合成线程会关照主线程更新页面中最新可见部份的位图。然则，假如主线程相应地不够快，合成线程不会坚持守候，而是立时绘制已天生的位图，还没准备好的部份用白色举行添补。
也就是说js是单线程的，但浏览器是多线程的，感兴趣的小伙伴可以看一下我之前翻译的谷歌日记浏览器多历程架构。
浏览器的衬着机制
大多数装备的屏幕革新率都是 60次/秒，浏览器对每一帧画面的衬着事变须要在16毫秒（1秒 / 60 = 16.66毫秒）之内完成。但实际上，在衬着某一帧画面的同时，浏览器另有一些分外的事变要做（比方衬着行列的治理，衬着线程与其他线程之间的切换等等）。因而纯真的衬着事变，平常须要掌握在10毫秒之内完成，才到达流通的视觉结果。假如超过了这个时候限制，页面的衬着就会涌现卡顿结果，也就是常说的jank，它是很蹩脚的用户体验。
在web页面中，代码就是经由也许以下步骤转换成屏幕上的显现像素：
1.JavaScript：平常来讲，我们会运用JavaScript来完成一些视觉变化的结果。
2.盘算款式：这个历程是依据CSS选择器，比方.headline或.nav > .nav_item，对每一个DOM元素婚配对应的CSS款式。这一步完毕以后，就肯定了每一个DOM元素上该运用什么CSS款式划定规矩。
3.规划：上一步肯定了每一个DOM元素的款式划定规矩，这一步就是详细盘算每一个DOM元素终究在屏幕上显现的大小和位置。web页面中元素的规划是相对的，因而一个元素的规划发作变化，会联动地引发其他元素的规划发作变化。比方，<body>元素的宽度的变化会影响其子元素的宽度，其子元素宽度的变化也会继承对其孙子元素发作影响。因而关于浏览器来讲，规划历程是常常发作的。
4.绘制：本质上就是添补像素的历程。包含绘制笔墨、色彩、图象、边框和暗影等，也就是一个DOM元素一切的可视结果。平常来讲，这个绘制历程是在多个层上完成的。
5.衬着层合：由上一步可知，对页面中DOM元素的绘制是在多个层上举行的。在每一个层上完成绘制历程以后，浏览器会将一切层根据合理的递次兼并成一个图层，然后显如今屏幕上。关于有位置堆叠的元素的页面，这个历程特别重要，由于一旦图层的兼并递次失足，将会致使元素显现异常。
上述历程的每一步中都有发作jank的可以，因而一定要弄清楚你的代码将会运转在哪一步。
虽然在理论上，页面的每一帧都是经由上述的流水线处置惩罚以后衬着出来的，但并不意味着页面每一帧的衬着都须要经由上述五个步骤的处置惩罚。实际上，对视觉变化结果的一个帧的衬着，有这么三种 经常使用的 流水线：
1.JS / CSS > 盘算款式 > 规划 > 绘制 > 衬着层兼并
假如你修正一个DOM元素的”layout”属性，也就是改变了元素的款式（比方宽度、高度或许位置等），那末浏览器会搜检哪些元素须要从新规划，然后对页面引发一个reflow历程完成从新规划。被reflow的元素，接下来也会引发绘制历程，末了引发衬着层兼并历程，天生末了的画面。
2.JS / CSS > 盘算款式 > 绘制 > 衬着层兼并
假如你修正一个DOM元素的“paint only”属性，比方背景图片、笔墨色彩或暗影等，这些属性不会影响页面的规划，因而浏览器会在完成款式盘算以后，跳过规划历程，只做绘制和衬着层兼并历程。
3.JS / CSS > 盘算款式 > 衬着层兼并
假如你修正一个非款式且非绘制的CSS属性，那末浏览器会在完成款式盘算以后，跳过规划和绘制的历程，直接做衬着层兼并。第三种的机能最为抱负，平常来讲关于动画和转动这类复合很重的衬着，我们就只管向第三种挨近。
机能优化是一门减法艺术，我们要本着阅历简化页面徐然历程，然后使每一步的衬着只管高效。
浏览器中CPU vs GPU，怎样选择？
我们先来讲说GPU，大多数手机、 平板电脑、 和盘算机都装备了GPU芯片，GPU有着异常专业的定位，这意味着GPU异常善于做某些事变（比方画图），但在其他方面则没什么上风。
如今，我们来看看CPU和GPU的内部特性
CPU（Central Processing Unit）,GPU（Graphics Processing Unit）翻译过来，第一个叫做中央处置惩罚器，后者叫做视觉处置惩罚器，换言之，同样是盘算机中用于盘算的中心组件，CPU重要担任通用盘算，GPU重要担任专用盘算。我们来看看下面的这个图明白一下：
翻译一下：
<li>_壮大的ALU – 下降操纵延时_
<li>_庞大的缓存器 –
将长耽误内存接见转换为短耽误缓存接见_
<li>_庞杂的掌握器 -分支瞻望用于削减分支耽误 -数据转发，削减数据耽误
_
翻译一下：
<li>_小缓存 -用来进步内存吞吐量_
<li>_小掌握器 -没有分支瞻望，没有数据转发_
<li>_高效能ALU – 许多长延时，然则有大批的吞吐流量_
可以看到，CPU中包含Control（掌握层），Cache（缓存层），ALU（算术逻辑单位），个中ALU是重要担任举行简朴运算的。而GPU中则可以显著的看到包含大批的ALU模块和少许的Cache和Control模块。
算术逻辑单位（英语：Arithmetic Logic Unit, ALU）[1]是中央处置惩罚器的实行单位，是一切中央处置惩罚器的中心组成部份，由及闸和或闸组成的算数逻辑单位，重要功能是举行二进制的算术运算，如加减乘(不包含整数除法)。基础上，在一切当代CPU体系构造中，二进制都以二补数的情势来示意。 —–维基百科
所以可以清楚地从构造中看出，CPU更善于于逻辑掌握，串行运算，GPU更善于于大规模并发盘算。举一个简朴的例子，一个传授，带着20个门生完成一个项目，如今项目须要处置惩罚1000次100之内的加减乘除运算，这项事变实在并不须要任何逻辑处置惩罚，只是大批的事变量的堆叠，这时候，就不须要传授亲力亲为，传授可以将使命分配给这20个门生分工完成这项事变，个中传授的角色就相当于CPU，20个门生整体相当于GPU，每一个门生就即是一个ALU。
GPU的处置惩罚图象的上风：
<li>绘制位图到屏幕上
<li>一遍又一各处绘制雷同的位图
<li>将同一位图绘制到差别位置，实行扭转以及缩放处置惩罚
<li>具有多核简朴盘算才能，可以处置惩罚大批盘算数据
GPU的慢在于：
<li>将位图加载到它的显存中
JS动画
瑕玷：JavaScript在浏览器的主线程中运转，而个中另有许多其他须要运转的JavaScript、款式盘算、规划、绘制等对其滋扰。这也就致使了线程可以涌现壅塞，从而形成丢帧的状况。
长处：JavaScript的动画与CSS预先定义好的动画差别，可以在其动画历程当中对其举行掌握：最先、停息、回放、中断、作废都是可以做到的。而且一些动画结果，比方视差转动结果，只要JavaScript可以完成。
CSS动画
瑕玷：缺少壮大的掌握才能。而且很难以有意义的体式格局结合到一同，使得动画变得庞杂且易于出问题。
长处：浏览器可以对动画举行优化。它必要时可以建立图层，然后在主线程之外运转，也就是开启GPU加快。
平常来讲，Chrome中满足以下恣意状况就会建立图层：
<li> 3D或透视变更（perspective transform）CSS属性
<li>运用加快视频解码的<video>节点
<li> 具有3D（WebGL）上下文或加快的2D上下文的 <canvas>节点
<li>夹杂插件（如Flash）
<li> 对本身的opacity做CSS动画或运用一个动画webkit变更的元素
<li>具有加快CSS过滤器的元素
<li>元素有一个包含复合层的子女节点（一个元素具有一个子元素，该子元素在本身的层里）
<li>元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面衬着）
须要注重的是，假如图层中某个元素须要重绘，那末全部图层都须要重绘。比方一个图层包含许多节点，个中有个gif图，gif图的每一帧，都邑重回全部图层的其他节点，然后天生终究的图层位图。所以这须要经由历程特别的体式格局来强迫gif图属于本身一个图层（translateZ(0)或许translate3d(0,0,0)），CSS3的动画也是一样。
瞻望
经由历程web workers 如许的多线程来完成动画
好啦！基础观点已铺垫完了，感兴趣的话，就来看看在营业线中怎样小试牛刀。网页动画机能日记（二）
转载请申明出处！
参考链接：
<li>http://blog.csdn.net/leer168/article/details/25917093
