h5渲染性能一瞥
內(nèi)容來源：2018 年 6 月 30 日，餓了么前端主管向勇在“餓了么技術(shù)沙龍?第27彈 【前端專場】”進(jìn)行《h5渲染性能一瞥》演講分享。IT 大咖說（微信id：itdakashuo）作為獨家視頻合作方，經(jīng)主辦方和講者審閱授權(quán)發(fā)布。
閱讀字?jǐn)?shù)：2488 | 7分鐘閱讀
獲取嘉賓演講視頻及PPT：http://suo.im/4SkvOx
摘要
前端性能按照類型來分主要分為加載性能和渲染性能。加載性能對于首屏的展示及其重要，而渲染性能對于頁面加載完成后的交互體驗極其重要。但目前絕大部分同學(xué)在提到前端性能的優(yōu)化時都會默認(rèn)等同于對加載性能的優(yōu)化，而忽略了渲染性能。本次議題就從幾個比較常見的角度聊聊開發(fā)中會無意識碰到的渲染性能問題。
H5 VS Native
在將H5和native進(jìn)行對比的時候，我們通常能想到的一點就是“快”，H5相對于native開發(fā)和上線都會快一些，一般的活動頁面和非關(guān)鍵頁面更多的傾向于H5來開發(fā)。
當(dāng)然H5也有相應(yīng)的缺點，它的加載和操作會慢一些，抽象來看就是性能問題。加載慢對應(yīng)的是加載性能，操作慢對應(yīng)的是渲染性能。加載性能可被定義為頁面首次加載時候的性能，這方面的優(yōu)化方案主要有靜態(tài)資源壓縮、懶加載、雪碧圖、CDN、server push等。
渲染性能可被定義為頁面進(jìn)行操作/交互時候的性能，對于這方面的優(yōu)化可能并不太容易想到。我在面試的時候也經(jīng)常會問面試者關(guān)于性能優(yōu)化的問題，不過大部分提到的優(yōu)化方案都是關(guān)于加載性能，少部分會提到GPU加速，相對來說這部分同學(xué)的CSS技能會高一些。
渲染
一般一次渲染都會經(jīng)過JavaScript > style > layout > paint > compoasite這樣的過程。在做動畫的時候可以進(jìn)行優(yōu)化，將layout和paint省略掉，這其實是將做動畫的元素提升為一個單獨的層。
渲染性能的優(yōu)化可以針對渲染過程中的每一步來做，下面列出了google開發(fā)者論壇中提到的具體優(yōu)化措施。
優(yōu)化JS執(zhí)行（JS）
縮小樣式計算的范圍并降低其復(fù)雜性（style）
避免大型、復(fù)雜的布局和布局抖動（layout、paint）
使用輸入處理程序去除抖動（layout、paint）
堅持僅合成器的屬性和管理層技術(shù)（composite）
簡化繪制的復(fù)制度、減小繪制區(qū)域（paint、composite）
層的優(yōu)化
上面加粗的兩個優(yōu)化手段可以總結(jié)為層的優(yōu)化，也就是開啟GPU加速。這里我們先假設(shè)一個場景，在一個頁面中存在兩個水平排列的元素1、2，他們分別位于左右兩端，我們要做的是將1移動到2的位置。對此最簡單的方案是設(shè)置position并改變right或left的值。第二種方式是使用transform：translateX，并加上 will-change: transform/transform: translate(0)將它提升為單獨的層，這種方案的好處在于啟用了GPU加速。
這樣看來只要應(yīng)用GPU加速就能很好的解決動畫優(yōu)化問題，但是實際應(yīng)用中的頁面往往要比上面所描述的場景復(fù)雜的多。就拿餓了么的H5頁面來說，它除了有輪播外還涉及到頁面滾動、點擊展開，返回頂部等。當(dāng)開啟layer borders查看時會發(fā)現(xiàn)滑動的過程中如果輪播圖正在播放整個頁面就會創(chuàng)建很多不必要的層。另外開啟Paint flashing查看重繪情況時也會發(fā)現(xiàn)每次輪播圖播放都會導(dǎo)致整個頁面重繪。這種問題在低端手機上可能會造成閃屏，需要額外注意。解決方案其實前面也提到過就是要將做動畫的元素提升為一個單獨的層（合成層）。
之前說過動畫的問題有兩種解決方案，如果這兩個方案結(jié)合在一起又會怎么樣呢，也就是將position和will-change寫在同一個元素上，這在實際寫代碼的過程中是很容易碰到的。由此引出了新的問題，浮動元素（渲染層）和合成層的關(guān)系。對此我個人做了下總結(jié)：若合成層的z-index值小于下方兄弟元素，且他們有重疊，則下方兄弟元素也會被提升為合成層。
上圖是餓了么頁面的簡化場景，區(qū)域1是可滑動動畫區(qū)，使用flex布局實現(xiàn)，區(qū)域2是店鋪列表，區(qū)域3是店鋪信息，這兩個區(qū)域都添加了position：relative。
這種實現(xiàn)方式?jīng)]有指定浮動層的z-index值，因此在區(qū)域1進(jìn)行滑動的時候，下方的每個店鋪列表都會被提升為單獨的層。在為區(qū)域1設(shè)置position：relative和z-index：1（高于下層）之后下方的層就不會再被提升了（此時下層z-index未設(shè)置）。
層爆炸
注意圖中標(biāo)記區(qū)域，當(dāng)點擊展開/收起活動的小三角的時候會有一個旋轉(zhuǎn)180度的交互效果，相信大家對此都很熟悉。這種效果實現(xiàn)起來也很簡單，設(shè)置transition過渡屬性就能完成。
在實際操作的時候查看層級會發(fā)現(xiàn)，每個商店列表都被提升成單獨的層且有很多嵌套。造成此問題的原因和前面的案例類似，主要還是沒有給擁有過渡動畫效果的小三角元素添加z-index值，解決方案同樣是為動畫元素設(shè)置z-inde。
這一系列的問題涉及到一個概念：層壓縮，即如果多個渲染層同一個合成層重疊時候，這些渲染層會被壓縮到一個GraphicsLayer中。
另外如果元素有動畫/過渡效果，可未指定層級順序高于下方浮動層，此時會假定下方的浮動層在動畫期間會受影響，從而無法被壓縮。
減少繪制區(qū)域
一般我們編寫頁面的時候都會為頭部和底部設(shè)置固定浮動，這涉及到減少繪制區(qū)域的優(yōu)化策略。在沒有設(shè)置浮動的情況下，每次頁面滾動頭部和底部就會被重新渲染，解決方案是設(shè)置浮動后將這些浮動的頭部和底部提升為單獨的層。
總結(jié)
- 上一篇： Vue(ES6)中的data属性为什么不
- 下一篇： 小程序如何发红包