摘要：動畫才是我們今天要談論的主要內容如何做到。所以在做動畫的時候，不要用做計算密集型的任務，返回的對象做好緩存，避免多次調用。所以開發小組就將和合二為一，利用的排版優勢和的渲染優勢。在其上層再加入一層，用來顯示渲染的結果。

自從 HTML5 誕生之后，關于 Web App 和 Native App 的討論就從未間斷過，孰優孰劣大家各執一詞。但作為前端開發者的我們，心里其實是明白的，這個世界是你們的（Native App），也是我們（Web App）的，但終究還是我們的，如果幾十年后再回頭看這一路的話，會發現你們不過是一插罷了。哈哈哈哈哈哈

但現在擺在眼前的事實是，Native App 比 Web App 的市場大，大家更愿意去用 Java 或者 OC ，而不愿意用 Js。大家都不喜歡用 Web App ，究其原因無非就兩點：兼容性、慢。

那我們就來談談慢這個問題。但貌似這個問題很龐大，這里就談一些我了解的東西。

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

動畫才是我們今天要談論的主要內容：如何做到 60fps。

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

計算 Js

瀏覽器計算 layout

繪圖 paint

在 GPU 上拼合圖層 composite

第一步 JS 計算是由開發者控制的，在這里的操作會影響到下面三步。在前端性能上我們經常遇到的問題就是回流，這就是由于開發者調用了一些方法觸發了 layout，然后瀏覽器就接著 paint、composite。

所以在做動畫的時候，不要用 JS 做計算密集型的任務，jQuery 返回的對象做好緩存，避免多次調用。layout 能不觸發就不觸發，paint 能不觸發就不觸發。那怎么做才能只觸發 composite 呢？ opacity 和 transform 這兩個屬性是不會觸發 layout 和 paint 的。所以作為前端開發，我們很喜歡也很樂于做透明度淡入淡出，因為這個不會用太大的性能問題。

有的同學就要問了：咦？color 和 box-shadow 這些也不涉及到 layout 啊，那我可以大規模的運用嗎？

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

上面是我打開一個帶有視差滾動效果的 medium 頁面后，從上向下滾動時產生的數據，其中綠色部分就是 paint + composite。可以看到在桌面上，視差滾動勉強達到 60fps，這樣的性能在手機上肯定是慘不忍睹的。其實在視差滾動中，元素的顏色大小位置都沒有改變，理論上是不需要 repaint 的，那么如何才能避免它呢？

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

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

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

Flipboard 開發團隊就發明了一種喪心病狂的辦法：用 canvas 渲染。Canvas 直接與 GPU 打交道，渲染速度非常快。但在使用過程中還是有很多顧慮的，下面是會遇到的一些問題：

文字換行如何處理

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

元素層級如何處理

自定義字體

如何排版

尤其是排版問題，CSS已經很成熟了，自己創立其它機制來排版無疑是搬石頭砸自己的腳。所以 Flipboard 開發小組就將 DOM 和 Canvas 合二為一，利用 DOM 的排版優勢和 Canvas 的渲染優勢。

現在用手機訪問 Flipboard 就可以看到他們的這一成果了，其方法就是文檔結構按照正常的 DOM 來，但是不加任何的顏色樣式，然后把這一層透明度改為 0 。在其上層再加入一層 canvas ，用來顯示渲染的結果。效果還是很不錯的：

總的來說，未來還是很光明的，雖然 web app 有各種各樣的性能問題，但它還是向著越來越好的方向發展。只要我們合適的利用瀏覽器給我們的資源，我們還是可以做出優秀的效果的。

參考文章：

也許，DOM 不是答案

60fps on the mobile web

參考視頻：

#perfmatters: 60fps layout and rendering