摘要：無線頁(yè)面本就分秒必爭(zhēng)，更不用說當(dāng)我們?cè)跓o線頁(yè)面中使用動(dòng)畫的時(shí)候。頁(yè)面中元素的布局是相對(duì)的，因此一個(gè)元素的布局發(fā)生變化，會(huì)聯(lián)動(dòng)地引發(fā)其他元素的布局發(fā)生變化。它通知瀏覽器在頁(yè)面重繪前執(zhí)行你的回調(diào)函數(shù)。

無線頁(yè)面本就分秒必爭(zhēng)，更不用說當(dāng)我們?cè)跓o線頁(yè)面中使用動(dòng)畫的時(shí)候。不管是css動(dòng)畫還是canvas動(dòng)畫，我們都需要時(shí)刻小心著，并且有必要掌握頁(yè)面性能的基本分析方法。

既然我們的目標(biāo)是優(yōu)化，那么就與瀏覽器的一些渲染和執(zhí)行機(jī)制有關(guān)，更好的迎合瀏覽器的行為方式，才可以讓我們的動(dòng)畫流暢而優(yōu)美。

沒錯(cuò)，瀏覽器是老大，全聽它的。

我們想讓頁(yè)面變快，想讓動(dòng)畫流暢，我們需要先了解一下是什么在影響著我們的感知。

頁(yè)面運(yùn)行在設(shè)備的瀏覽器中，現(xiàn)在市面上的移動(dòng)設(shè)備的刷新頻率大多是60次/秒（幀率）。所以給瀏覽器渲染每一幀的畫面的時(shí)間應(yīng)該是（1s/60=16.67ms）。

但實(shí)際上，瀏覽器并不是把功夫全花在為我們渲染頁(yè)面上，他還需要做一些額外的工作，比如渲染隊(duì)列的管理和不同線程的切換等等。所以，單純的瀏覽器渲染工作留給我們的時(shí)間大約也就是10ms左右，當(dāng)我們?cè)诿恳粠龅匿秩静僮鞔笥谶@個(gè)時(shí)間的時(shí)候，比較直觀的表現(xiàn)就是頁(yè)面卡頓，動(dòng)畫卡頓。

當(dāng)我們使用css animation完成動(dòng)畫時(shí)，這一點(diǎn)看起來沒有那么重要，因?yàn)闉g覽器會(huì)為我們handle一些事情。但是當(dāng)我們需要使用js比如canvas來實(shí)現(xiàn)流暢的逐幀動(dòng)畫時(shí)，需要牢記這個(gè)有限的時(shí)間，它很重要。

我們的代碼是如何一步步的渲染成頁(yè)面的呢？

JavaScript。一般來說，我們使用JavaScript來實(shí)現(xiàn)一些頁(yè)面邏輯，但偶爾我們也可能會(huì)使用JavaScript來實(shí)現(xiàn)一些視覺變化的效果。比如用jQuery的animate函數(shù)做一個(gè)動(dòng)畫、或者往頁(yè)面里添加一些DOM元素等。當(dāng)然，現(xiàn)在更可能的是使用CSS Animations, Transitions和Web Animation API。

計(jì)算樣式（Style）。這個(gè)過程是通過樣式文件中的CSS選擇器，對(duì)每個(gè)DOM元素匹配對(duì)應(yīng)的CSS樣式。

布局(Layout)。上一步確定了每個(gè)DOM元素的樣式規(guī)則，這一步就是具體計(jì)算每個(gè)DOM元素最終在屏幕上顯示的大小和位置。web頁(yè)面中元素的布局是相對(duì)的，因此一個(gè)元素的布局發(fā)生變化，會(huì)聯(lián)動(dòng)地引發(fā)其他元素的布局發(fā)生變化。因此對(duì)于瀏覽器來說，布局過程是經(jīng)常發(fā)生的。

繪制(Paint)。繪制，本質(zhì)上就是填充像素的過程。包括繪制文字、顏色、圖像、邊框和陰影等，也就是一個(gè)DOM元素所有的可視效果。一般來說，這個(gè)繪制過程是在多個(gè)層上完成的。

渲染層合并(Composite)。由上一步可知，對(duì)頁(yè)面中DOM元素的繪制是在多個(gè)層上進(jìn)行的。在每個(gè)層上完成繪制過程之后，瀏覽器會(huì)將所有層按照合理的順序合并成一個(gè)圖層，然后顯示在屏幕上。對(duì)于有位置重疊的元素的頁(yè)面，這個(gè)過程尤其重要，因?yàn)橐坏﹫D層的合并順序出錯(cuò)，將會(huì)導(dǎo)致元素顯示異常。

看起來每個(gè)頁(yè)面都會(huì)經(jīng)歷這樣的幾個(gè)過程，然而我們其實(shí)可以使用一些技巧，幫助瀏覽器跳過某些步驟，而縮短他的工作時(shí)間。

1.五個(gè)步驟都消耗了時(shí)間

當(dāng)我們?cè)趈s中改變了某個(gè)DOM元素的layout時(shí)，那么瀏覽器就會(huì)檢查頁(yè)面中的哪些元素需要重新布局，然后對(duì)頁(yè)面激發(fā)一個(gè)reflow過程以完成頁(yè)面的重新布局。被reflow的元素，接下來就一定會(huì)再次經(jīng)過Paint和Composite這兩個(gè)過程，以渲染出最新的頁(yè)面。

2.跳過layout這一步

當(dāng)我們只修改了一個(gè)DOM元素的paint only屬性的時(shí)候，比如background-image/color/box-shadow等。這個(gè)時(shí)候不會(huì)觸發(fā)layout，瀏覽器在完成樣式的計(jì)算之后就會(huì)跳過layout的過程，就只Paint和Composite了。

3.跳過layout和paint這兩步

如果你修改一個(gè)非樣式且非繪制的CSS屬性，那么瀏覽器會(huì)在完成樣式計(jì)算之后，跳過布局和繪制的過程，直接Composite。

我們嘗試下使用transform動(dòng)畫來盡可能的達(dá)到這種效果。

我們可能經(jīng)常需要做一些動(dòng)畫，比如在做某些揭秘或者新手引導(dǎo)的效果時(shí)，會(huì)需要做一些將內(nèi)容移入移出的操作。

當(dāng)然可能第一個(gè)想到的就是 css transition 只要過渡一下 left 值或者 bottom 的值就可以了。效果或許很快就會(huì)實(shí)現(xiàn)，但是當(dāng)我們?cè)谝粋€(gè)頁(yè)面頻繁的做著這樣的移入移出操作時(shí)，細(xì)心地我們放在手機(jī)中（6P）看一看，動(dòng)畫并不會(huì)很流暢，尤其是在某些低端機(jī)型上。

我們換用 transform 來實(shí)現(xiàn)相同的效果：

1 transition: left 2s ease-in-out;  ---> transition: transform 2s ease-in-out;  
2 left: xxx; ---> transform: translate3d(xxx, yyy, zzz); 

原因在于：

簡(jiǎn)單的說頁(yè)面的繪制并不是在單層的畫面里完成的，這其中有渲染層合成層等概念。對(duì) opacity 和 transform 應(yīng)用了 CSS 動(dòng)畫的渲染層、有 3D 或者 perspective transform 的 CSS 屬性的渲染層等滿足一些條件的渲染層被稱為合成層;
合成層有自己的渲染上下文，并且交由 GPU 處理，比 CPU 要快;
當(dāng)頁(yè)面需要重繪時(shí)，合成層的元素只會(huì)重繪自己層內(nèi)的元素，而非整個(gè)頁(yè)面;
優(yōu)化過后再放在設(shè)備里查看，可以感受到效果明顯的提升。其實(shí)這里就做到了上面提到的，節(jié)省了layout和paint。

現(xiàn)在css的動(dòng)畫越來越好用，也能滿足越來越多的需求。但在某些復(fù)雜的需求中我們可能還是要求助于js。

比如說我這里實(shí)現(xiàn)的一個(gè)半圓的動(dòng)畫：半圓progress?？雌饋硎褂胏ss動(dòng)畫就完全可以滿足我的需求，但是當(dāng)需求變化的時(shí)候，我們也只能擁抱變化了。

使用requestAnimationFrame

圓弧progress這里用canvas實(shí)現(xiàn)了自定義弧度圓弧的增長(zhǎng)動(dòng)畫。

這里我們借助這個(gè)動(dòng)畫效果看一下是如何使用canvas和requestAnimationFrame來實(shí)現(xiàn)流暢的逐幀動(dòng)畫的。

window.requestAnimationFrame 是一個(gè)專門為動(dòng)畫而生的 web API 。它通知瀏覽器在頁(yè)面重繪前執(zhí)行你的回調(diào)函數(shù)。通常來說被調(diào)用的頻率是每秒60次。

假設(shè)我們的頁(yè)面上有一個(gè)動(dòng)畫效果，如果我們想保證每一幀的順利繪制，那么我們就需要requestAnimationFrame來保證我們的繪制時(shí)機(jī)了。

很多框架和示例代碼都是用setTimeout或setInterval來實(shí)現(xiàn)頁(yè)面中的動(dòng)畫效果，比如jQuery中的animation。這種實(shí)現(xiàn)方式的問題是，你在setTimeout或setInterval中指定的回調(diào)函數(shù)的執(zhí)行時(shí)機(jī)是無法保證的。它將在這一幀動(dòng)畫的_某個(gè)時(shí)間點(diǎn)_被執(zhí)行，很可能是在幀結(jié)束的時(shí)候。這就意味這我們可能失去這一幀的信息。

requestAnimationFrame的其他高能用法

根據(jù)requestAnimationFrame的特性，其實(shí)我們還可以在很多別的想不到的地方來一顯身手。

動(dòng)畫：也是它的主要用途，它將我們動(dòng)畫的執(zhí)行時(shí)機(jī)和執(zhí)行頻率交由瀏覽器決定，以得到更好的性能；

函數(shù)節(jié)流：requestAnimationFrame 的執(zhí)行頻率（一幀）是16.67ms，利用這一個(gè)特征就可以做到函數(shù)節(jié)流，避免高頻事件在一幀內(nèi)做多余的無用功的函數(shù)執(zhí)行，例：

 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 });

分幀初始化：同樣利用一幀的執(zhí)行時(shí)間將模塊的初始化或渲染函數(shù)分散到不同的幀中來執(zhí)行，這樣每個(gè)模塊都有16.67ms的執(zhí)行時(shí)間，而不是一股腦的堆在那里等著執(zhí)行；

 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);
 

我們還是借助這個(gè)例子，圓弧progress 簡(jiǎn)單的看下如何分析無線頁(yè)面的性能。

這里的實(shí)現(xiàn)思路是這樣的：

確定圓弧的起始弧度（0.75PI）和終止弧度（根據(jù)當(dāng)前分值占上限分值的比例計(jì)算，最大為2.25PI）；

隨著時(shí)間的增長(zhǎng)逐幀繪制終點(diǎn)位置 requestAnimationFrame(draw)；

根據(jù)每一幀的終點(diǎn)位置的 cos 和 sin 值得到跟隨的圓圈坐標(biāo)并繪制；

但當(dāng)然，實(shí)現(xiàn)完成只是走了第一步，我們來借助Chrome Timeline來分析一下這個(gè)簡(jiǎn)單的頁(yè)面。

看一下幀率，在進(jìn)度動(dòng)畫進(jìn)行的時(shí)候，看起來幀率不錯(cuò)，沒有產(chǎn)生掉幀的現(xiàn)象，說明每一幀的耗時(shí)都還ok，我的動(dòng)畫基本不會(huì)卡頓；

在函數(shù)的執(zhí)行和調(diào)用那一欄中，可能有問題的部分右上角會(huì)被標(biāo)紅，還可以查看可能存在問題的細(xì)節(jié)；這里提示我頁(yè)面強(qiáng)制重排了，仔細(xì)觀察下面的 Bottom-up tab 中可以定位到具體的代碼。

使用Timeline就可以看到頁(yè)面的幾種指標(biāo)，幀率，js執(zhí)行等等。就可以針對(duì)出現(xiàn)問題的幀下手優(yōu)化。

在分析頁(yè)面性能的時(shí)候，嚴(yán)重推薦閱讀：[https://developer.chrome.com/devtools/docs/timeline] .timeline的詳細(xì)使用說明，它真的很強(qiáng)大，能幫助我們分析到頁(yè)面的各個(gè)方面的問題。