无线页面本就争分夺秒，更不用说当我们在无线页面中运用动画的时候。不管是css动画照样canvas动画，我们都须要时候警惕着，而且有必要控制页面机能的基础剖析要领。
既然我们的目的是优化，那末就与浏览器的一些衬着和实行机制有关，更好的投合浏览器的行动体式格局，才能够让我们的动画流通而幽美。
没错，浏览器是老大，全听它的。
一、装备革新率（帧率）
我们想让页面变快，想让动画流通，我们须要先相识一下是什么在影响着我们的感知。
页面运行在装备的浏览器中，如今市面上的挪动装备的革新频次大多是60次/秒（帧率）。所以给浏览器衬着每一帧的画面的时候应该是（1s/60=16.67ms）。
但实际上，浏览器并非把工夫全花在为我们衬着页面上，他还须要做一些分外的事变，比方衬着行列的治理和差别线程的切换等等。所以，纯真的浏览器衬着事变留给我们的时候约莫也就是10ms摆布，当我们在每一帧所做的衬着操纵大于这个时候的时候，比较直观的表现就是页面卡顿，动画卡顿。
当我们运用css animation完成动画时，这一点看起来没有那末主要，由于浏览器会为我们handle一些事变。然则当我们须要运用js比方canvas来完成流通的逐帧动画时，须要切记这个有限的时候，它很主要。
二、浏览器的页面衬着流水线
我们的代码是怎样一步步的衬着成页面的呢？
JavaScript。一般来讲，我们运用JavaScript来完成一些页面逻辑，但偶然我们也能够会运用JavaScript来完成一些视觉变化的结果。比方用jQuery的animate函数做一个动画、也许往页面里增加一些DOM元素等。固然，如今更能够的是运用CSS Animations, Transitions和Web Animation API。
盘算款式（Style）。这个历程是经由过程款式文件中的CSS选择器，对每一个DOM元素婚配对应的CSS款式。
规划(Layout)。上一步肯定了每一个DOM元素的款式划定规矩，这一步就是细致盘算每一个DOM元素终究在屏幕上显现的大小和位置。web页面中元素的规划是相对的，因而一个元素的规划发作变化，会联动地引发其他元素的规划发作变化。因而关于浏览器来讲，规划历程是常常发作的。
绘制(Paint)。绘制，本质上就是添补像素的历程。包含绘制笔墨、色彩、图象、边框和暗影等，也就是一个DOM元素一切的可视结果。一般来讲，这个绘制历程是在多个层上完成的。
衬着层兼并(Composite)。由上一步可知，对页面中DOM元素的绘制是在多个层上举行的。在每一个层上完成绘制历程以后，浏览器会将一切层依据合理的递次兼并成一个图层，然后显现在屏幕上。关于有位置堆叠的元素的页面，这个历程特别主要，由于一旦图层的兼并递次失足，将会致使元素显现非常。
看起来每一个页面都邑阅历如许的几个历程，但是我们实在能够运用一些技能，协助浏览器跳过某些步骤，而收缩他的事变时候。
1.五个步骤都斲丧了时候
当我们在js中改变了某个DOM元素的layout时，那末浏览器就会搜检页面中的哪些元素须要从新规划，然后对页面引发一个reflow历程以完成页面的从新规划。被reflow的元素，接下来就一定会再次经由Paint和Composite这两个历程，以衬着出最新的页面。
2.跳过layout这一步
当我们只修正了一个DOM元素的paint only属性的时候，比方background-image/color/box-shadow等。这个时候不会触发layout，浏览器在完成款式的盘算以后就会跳过layout的历程，就只Paint和Composite了。
3.跳过layout和paint这两步
假如你修正一个非款式且非绘制的CSS属性，那末浏览器会在完成款式盘算以后，跳过规划和绘制的历程，直接Composite。
我们尝试下运用transform动画来尽量的到达这类结果。
三、运用transform完成动画
我们能够常常须要做一些动画，比方在做某些揭秘也许新手指导的结果时，会须要做一些将内容移入移出的操纵。
固然能够第一个想到的就是 css transition 只需过渡一下 left 值也许 bottom 的值就能够了。结果也许很快就会完成，然则当我们在一个页面频仍的做着如许的移入移出操纵时，细心地我们放在手机中（6P）看一看，动画并不会很流通，特别是在某些低端机型上。
我们换用 transform 来完成雷同的结果：
1 transition: left 2s ease-in-out; ---> transition: transform 2s ease-in-out;
2 left: xxx; ---> transform: translate3d(xxx, yyy, zzz); 缘由在于：
简朴的说页面的绘制并非在单层的画面里完成的，这其中有衬着层合成层等观点。对 opacity 和 transform 应用了 CSS 动画的衬着层、有 3D 也许 perspective transform 的 CSS 属性的衬着层等满足一些前提的衬着层被称为合成层;
合成层有本身的衬着上下文，而且交由 GPU 处置惩罚，比 CPU 要快;
当页面须要重绘时，合成层的元素只会重绘本身层内的元素，而非全部页面;
优化事后再放在装备里检察，能够感受到结果显著的提拔。实在这里就做到了上面提到的，节省了layout和paint。
四、从css到canvas，运用requestAnimationFrame
如今css的动画愈来愈好用，也能满足愈来愈多的需求。但在某些庞杂的需求中我们能够照样请求助于js。
比方说我这里完成的一个半圆的动画：半圆progress。看起来运用css动画就完全能够满足我的需求，然则当需求变化的时候，我们也只能拥抱变化了。
运用requestAnimationFrame
圆弧progress这里用canvas完成了自定义弧度圆弧的增进动画。
这里我们借助这个动画结果看一下是怎样运用canvas和requestAnimationFrame来完成流通的逐帧动画的。
window.requestAnimationFrame 是一个特地为动画而生的 web API 。它关照浏览器在页面重绘前实行你的回调函数。一般来讲被挪用的频次是每秒60次。
假定我们的页面上有一个动画结果，假如我们想保证每一帧的顺遂绘制，那末我们就须要requestAnimationFrame来保证我们的绘制机遇了。
许多框架和示例代码都是用setTimeout或setInterval来完成页面中的动画结果，比方jQuery中的animation。这类完成体式格局的题目是，你在setTimeout或setInterval中指定的回调函数的实行机遇是没法保证的。它将在这一帧动画的_某个时候点_被实行，许多是在帧完毕的时候。这就意味这我们能够落空这一帧的信息。
requestAnimationFrame的其他高能用法
依据requestAnimationFrame的特性，实在我们还能够在许多别的想不到的处所来一显身手。
动画：也是它的主要用途，它将我们动画的实行机遇和实行频次交由浏览器决议，以获得更好的机能；
函数撙节：requestAnimationFrame 的实行频次（一帧）是16.67ms，应用这一个特性就能够做到函数撙节，防止高频事宜在一帧内做过剩的无用功的函数实行，例：
1 var $box = $('#J_Test'), 2 $point = $box.find('b'); 3 $box.on('mouseenter',function(e){ 4 requestAnimationFrame(function(){ 5 $point.css({ 6 top : e.pageY, 7 left : e.pageX 8 }) 9 }); 11 });分帧初始化：一样应用一帧的实行时候将模块的初始化或衬着函数疏散到差别的帧中来实行，如许每一个模块都有16.67ms的实行时候，而不是一股脑的堆在那里等着实行；
1 var rAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || 2 function(c) { 3 setTimeout(c, 1 / 60 * 1000); 4 }; 5 6 function render() { 7 self.$container.html(itemHtml); 8 self.$container.find('.J_LazyLoad').lazyload(); 9 } 10 11 rAF(render);
五、剖析你的无线页面
我们照样借助这个例子，圆弧progress 简朴的看下怎样剖析无线页面的机能。
这里的完成思绪是如许的：
肯定圆弧的肇端弧度（0.75PI）和停止弧度（依据当前分值占上限分值的比例盘算，最大为2.25PI）；
跟着时候的增进逐帧绘制尽头位置 requestAnimationFrame(draw)；
依据每一帧的尽头位置的 cos 和 sin 值获得追随的圆圈坐标并绘制；
但固然，完成完成只是走了第一步，我们来借助Chrome Timeline来剖析一下这个简朴的页面。
看一下帧率，在进度动画举行的时候，看起来帧率不错，没有发生掉帧的征象，申明每一帧的耗时都还ok，我的动画基础不会卡顿；
在函数的实行和挪用那一栏中，能够有题目的部份右上角会被标红，还能够检察能够存在题目的细节；这里提醒我页面强迫重排了，仔细观察下面的 Bottom-up tab 中能够定位到细致的代码。
运用Timeline就能够看到页面的几种目标，帧率，js实行等等。就能够针对出现题目的帧动手优化。
在剖析页面机能的时候，严峻引荐浏览：[https://developer.chrome.com/devtools/docs/timeline] .timeline的细致运用申明，它真的很壮大，能协助我们剖析到页面的各个方面的题目。
