摘要:動畫才是我們今天要談論的主要內(nèi)容如何做到。所以在做動畫的時候,不要用做計算密集型的任務,返回的對象做好緩存,避免多次調(diào)用。所以開發(fā)小組就將和合二為一,利用的排版優(yōu)勢和的渲染優(yōu)勢。在其上層再加入一層,用來顯示渲染的結果。
自從 HTML5 誕生之后,關于 Web App 和 Native App 的討論就從未間斷過,孰優(yōu)孰劣大家各執(zhí)一詞。但作為前端開發(fā)者的我們,心里其實是明白的,這個世界是你們的(Native App),也是我們(Web App)的,但終究還是我們的,如果幾十年后再回頭看這一路的話,會發(fā)現(xiàn)你們不過是一插罷了。哈哈哈哈哈哈
但現(xiàn)在擺在眼前的事實是,Native App 比 Web App 的市場大,大家更愿意去用 Java 或者 OC ,而不愿意用 Js。大家都不喜歡用 Web App ,究其原因無非就兩點:兼容性、慢。
那我們就來談談慢這個問題。但貌似這個問題很龐大,這里就談一些我了解的東西。
提高頁面加載速度,這個問題老生常談了,什么多域名、CDN、組件化、seajs都是解決辦法,淘寶首頁就是個很好的案例。這里我們就不再贅述,網(wǎng)上很多其它相關的資料。
動畫才是我們今天要談論的主要內(nèi)容:如何做到 60fps。
60pfs 這是CRT顯示器的刷新頻率,也是人眼感覺不到卡頓的頻率,也就是每秒 60 幀,每幀的時間間隔是 16ms。然后我們了解一下瀏覽器的渲染機制,計算機需要在 16ms 內(nèi)完成下面這些任務:
計算 Js
瀏覽器計算 layout
繪圖 paint
在 GPU 上拼合圖層 composite
第一步 JS 計算是由開發(fā)者控制的,在這里的操作會影響到下面三步。在前端性能上我們經(jīng)常遇到的問題就是回流,這就是由于開發(fā)者調(diào)用了一些方法觸發(fā)了 layout,然后瀏覽器就接著 paint、composite。
所以在做動畫的時候,不要用 JS 做計算密集型的任務,jQuery 返回的對象做好緩存,避免多次調(diào)用。layout 能不觸發(fā)就不觸發(fā),paint 能不觸發(fā)就不觸發(fā)。那怎么做才能只觸發(fā) composite 呢? opacity 和 transform 這兩個屬性是不會觸發(fā) layout 和 paint 的。所以作為前端開發(fā),我們很喜歡也很樂于做透明度淡入淡出,因為這個不會用太大的性能問題。
有的同學就要問了:咦?color 和 box-shadow 這些也不涉及到 layout 啊,那我可以大規(guī)模的運用嗎?
答案是不行,為什么呢?因為在 layout、paint 和 composite 中,最消耗性能的就是 paint。具體有多消耗呢?
上面是我打開一個帶有視差滾動效果的 medium 頁面后,從上向下滾動時產(chǎn)生的數(shù)據(jù),其中綠色部分就是 paint + composite。可以看到在桌面上,視差滾動勉強達到 60fps,這樣的性能在手機上肯定是慘不忍睹的。其實在視差滾動中,元素的顏色大小位置都沒有改變,理論上是不需要 repaint 的,那么如何才能避免它呢?
其中一種方法就是創(chuàng)建新的 layer,但這種方法有一定的代價,其中最出名的就是在高 DPI 屏幕下字體顯示問題,還有子元素position:fixed錯位等等一些事情。
上面的圖片就是在 surface pro3 + chrome 訪問 feedly 的截圖,可以明顯的看到文字發(fā)虛。
日子還是要過的,Native App 也是要被打敗的,那么怎么辦呢?
Flipboard 開發(fā)團隊就發(fā)明了一種喪心病狂的辦法:用 canvas 渲染。Canvas 直接與 GPU 打交道,渲染速度非常快。但在使用過程中還是有很多顧慮的,下面是會遇到的一些問題:
文字換行如何處理
圖片需要加載后才能放入 canvas
元素層級如何處理
自定義字體
如何排版
尤其是排版問題,CSS已經(jīng)很成熟了,自己創(chuàng)立其它機制來排版無疑是搬石頭砸自己的腳。所以 Flipboard 開發(fā)小組就將 DOM 和 Canvas 合二為一,利用 DOM 的排版優(yōu)勢和 Canvas 的渲染優(yōu)勢。
現(xiàn)在用手機訪問 Flipboard 就可以看到他們的這一成果了,其方法就是文檔結構按照正常的 DOM 來,但是不加任何的顏色樣式,然后把這一層透明度改為 0 。在其上層再加入一層 canvas ,用來顯示渲染的結果。效果還是很不錯的:
總的來說,未來還是很光明的,雖然 web app 有各種各樣的性能問題,但它還是向著越來越好的方向發(fā)展。只要我們合適的利用瀏覽器給我們的資源,我們還是可以做出優(yōu)秀的效果的。
參考文章:
也許,DOM 不是答案
60fps on the mobile web
參考視頻:
#perfmatters: 60fps layout and rendering
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85561.html
摘要:而且已開源出來,隨著容器技術發(fā)展,大文件分發(fā)一直是個重要的問題,所以是一件值得研究的技術。實用推薦檢定攻略是近期推出的一項認證,用以認證開發(fā)者的移動網(wǎng)頁開發(fā)技能。凈化,移除中不必要的文件技術周刊由小組出品,匯聚一周好文章,周刊原文。 業(yè)界動態(tài) 直擊阿里雙11神秘技術:PB級大規(guī)模文件分發(fā)系統(tǒng)蜻蜓 文章主要介紹了阿里的PB級大規(guī)模文件分發(fā)系統(tǒng)蜻蜓, 通過使用P2P技術同時結合智能壓縮、智...
閱讀 2581·2021-11-22 12:01
閱讀 1105·2021-11-15 11:37
閱讀 3684·2021-09-22 14:59
閱讀 1746·2021-09-04 16:45
閱讀 1382·2021-09-03 10:30
閱讀 1013·2021-08-11 11:18
閱讀 2459·2019-08-30 10:53
閱讀 2013·2019-08-29 15:13