摘要：動(dòng)畫才是我們今天要談?wù)摰闹饕獌?nèi)容如何做到。所以在做動(dòng)畫的時(shí)候，不要用做計(jì)算密集型的任務(wù)，返回的對(duì)象做好緩存，避免多次調(diào)用。所以開(kāi)發(fā)小組就將和合二為一，利用的排版優(yōu)勢(shì)和的渲染優(yōu)勢(shì)。在其上層再加入一層，用來(lái)顯示渲染的結(jié)果。

自從 HTML5 誕生之后，關(guān)于 Web App 和 Native App 的討論就從未間斷過(guò)，孰優(yōu)孰劣大家各執(zhí)一詞。但作為前端開(kāi)發(fā)者的我們，心里其實(shí)是明白的，這個(gè)世界是你們的（Native App），也是我們（Web App）的，但終究還是我們的，如果幾十年后再回頭看這一路的話，會(huì)發(fā)現(xiàn)你們不過(guò)是一插罷了。哈哈哈哈哈哈

但現(xiàn)在擺在眼前的事實(shí)是，Native App 比 Web App 的市場(chǎng)大，大家更愿意去用 Java 或者 OC ，而不愿意用 Js。大家都不喜歡用 Web App ，究其原因無(wú)非就兩點(diǎn)：兼容性、慢。

那我們就來(lái)談?wù)劼@個(gè)問(wèn)題。但貌似這個(gè)問(wèn)題很龐大，這里就談一些我了解的東西。

提高頁(yè)面加載速度，這個(gè)問(wèn)題老生常談了，什么多域名、CDN、組件化、seajs都是解決辦法，淘寶首頁(yè)就是個(gè)很好的案例。這里我們就不再贅述，網(wǎng)上很多其它相關(guān)的資料。

動(dòng)畫才是我們今天要談?wù)摰闹饕獌?nèi)容：如何做到 60fps。

60pfs 這是CRT顯示器的刷新頻率，也是人眼感覺(jué)不到卡頓的頻率，也就是每秒 60 幀，每幀的時(shí)間間隔是 16ms。然后我們了解一下瀏覽器的渲染機(jī)制，計(jì)算機(jī)需要在 16ms 內(nèi)完成下面這些任務(wù)：

計(jì)算 Js

瀏覽器計(jì)算 layout

繪圖 paint

在 GPU 上拼合圖層 composite

第一步 JS 計(jì)算是由開(kāi)發(fā)者控制的，在這里的操作會(huì)影響到下面三步。在前端性能上我們經(jīng)常遇到的問(wèn)題就是回流，這就是由于開(kāi)發(fā)者調(diào)用了一些方法觸發(fā)了 layout，然后瀏覽器就接著 paint、composite。

所以在做動(dòng)畫的時(shí)候，不要用 JS 做計(jì)算密集型的任務(wù)，jQuery 返回的對(duì)象做好緩存，避免多次調(diào)用。layout 能不觸發(fā)就不觸發(fā)，paint 能不觸發(fā)就不觸發(fā)。那怎么做才能只觸發(fā) composite 呢？ opacity 和 transform 這兩個(gè)屬性是不會(huì)觸發(fā) layout 和 paint 的。所以作為前端開(kāi)發(fā)，我們很喜歡也很樂(lè)于做透明度淡入淡出，因?yàn)檫@個(gè)不會(huì)用太大的性能問(wèn)題。

有的同學(xué)就要問(wèn)了：咦？color 和 box-shadow 這些也不涉及到 layout 啊，那我可以大規(guī)模的運(yùn)用嗎？

答案是不行，為什么呢？因?yàn)樵?layout、paint 和 composite 中，最消耗性能的就是 paint。具體有多消耗呢？

上面是我打開(kāi)一個(gè)帶有視差滾動(dòng)效果的 medium 頁(yè)面后，從上向下滾動(dòng)時(shí)產(chǎn)生的數(shù)據(jù)，其中綠色部分就是 paint + composite?？梢钥吹皆谧烂嫔?，視差滾動(dòng)勉強(qiáng)達(dá)到 60fps，這樣的性能在手機(jī)上肯定是慘不忍睹的。其實(shí)在視差滾動(dòng)中，元素的顏色大小位置都沒(méi)有改變，理論上是不需要 repaint 的，那么如何才能避免它呢？

其中一種方法就是創(chuàng)建新的 layer，但這種方法有一定的代價(jià)，其中最出名的就是在高 DPI 屏幕下字體顯示問(wèn)題，還有子元素position:fixed錯(cuò)位等等一些事情。

上面的圖片就是在 surface pro3 + chrome 訪問(wèn) feedly 的截圖，可以明顯的看到文字發(fā)虛。

日子還是要過(guò)的，Native App 也是要被打敗的，那么怎么辦呢？

Flipboard 開(kāi)發(fā)團(tuán)隊(duì)就發(fā)明了一種喪心病狂的辦法：用 canvas 渲染。Canvas 直接與 GPU 打交道，渲染速度非?？?。但在使用過(guò)程中還是有很多顧慮的，下面是會(huì)遇到的一些問(wèn)題：

文字換行如何處理

圖片需要加載后才能放入 canvas

元素層級(jí)如何處理

自定義字體

如何排版

尤其是排版問(wèn)題，CSS已經(jīng)很成熟了，自己創(chuàng)立其它機(jī)制來(lái)排版無(wú)疑是搬石頭砸自己的腳。所以 Flipboard 開(kāi)發(fā)小組就將 DOM 和 Canvas 合二為一，利用 DOM 的排版優(yōu)勢(shì)和 Canvas 的渲染優(yōu)勢(shì)。

現(xiàn)在用手機(jī)訪問(wèn) Flipboard 就可以看到他們的這一成果了，其方法就是文檔結(jié)構(gòu)按照正常的 DOM 來(lái)，但是不加任何的顏色樣式，然后把這一層透明度改為 0 。在其上層再加入一層 canvas ，用來(lái)顯示渲染的結(jié)果。效果還是很不錯(cuò)的：

總的來(lái)說(shuō)，未來(lái)還是很光明的，雖然 web app 有各種各樣的性能問(wèn)題，但它還是向著越來(lái)越好的方向發(fā)展。只要我們合適的利用瀏覽器給我們的資源，我們還是可以做出優(yōu)秀的效果的。

參考文章：

也許，DOM 不是答案

60fps on the mobile web

參考視頻：

#perfmatters: 60fps layout and rendering