移動 H5（PC Web）前端性能優化指南

時間 2019-11-12

標籤移動 h5 web 前端性能優化指南欄目無線简体版

原文原文鏈接

原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_member=MzFiZGQwMmUwMGNjYjNlYmJkMWY4MmZjMTY4MjdlZmY%3D%0Acss

移動 H5 （PC Web）前端性能優化指南

概述html

PC 優化手段在 Mobile 側一樣適用
在 Mobile 側咱們提出三秒種渲染完成首屏指標
基於第二點，首屏加載 3 秒完成或使用 Loading
基於聯通 3G 網絡平均 338KB/s ( 2.71Mb/s )，因此首屏資源不該超過 1014KB
Mobile 側因手機配置緣由，除加載外渲染速度也是優化重點
基於第五點，要合理處理代碼減小渲染損耗
基於第2、第五點，全部影響首屏加載和渲染的代碼應在處理邏輯中後置
加載完成後用戶交互使用時也需注意性能

熊D注：鑑於第 1 條簡單修改了一下標題

優化指南前端

[加載優化]

加載過程是最爲耗時的過程，可能會佔到總耗時的 80% 時間，所以是優化的重點html5

減小 HTTP 請求

由於手機瀏覽器同時響應請求爲 4 個請求（Android 支持4個，iOS 5 後可支持 6 個），因此要儘可能減小頁面的請求數，首次加載同時請求數不能超過 4 個css3

合併 CSS、JavaScript
合併小圖片，使用雪碧圖

緩存

使用緩存能夠減小向服務器的請求數，節省加載時間，因此全部靜態資源都要在服務器端設置緩存，而且儘可能使用長 Cache（長 Cache 資源的更新可以使用時間戳）git

緩存一切可緩存的資源
使用長 Cache（使用時間戳更新 Cache）
使用外聯式引用 CSS、JavaScript

熊D注：也許使用 MD5 指紋更加可靠

壓縮 HTML、CSS、JavaScript

減小資源大小能夠加快網頁顯示速度，因此要對 HTML、CSS、JavaScript 等進行代碼壓縮，並在服務器端設置 GZipgithub

壓縮（例如，多餘的空格、換行符和縮進）
啓用 GZip

無阻塞

寫在 HTML 頭部的 JavaScript（無異步），和寫在 HTML 標籤中的 Style 會阻塞頁面的渲染，所以 CSS 放在頁面頭部並使用 Link 方式引入，避免在 HTML 標籤中寫 Style，JavaScript 放在頁面尾部或使用異步方式加載。web

熊D注：即便用 async 和 defer 屬性

使用首屏加載

首屏的快速顯示，能夠大大提高用戶對頁面速度的感知，所以應儘可能針對首屏的快速顯示作優化正則表達式

熊D注：注意可交互元素的狀態管理

按需加載

將不影響首屏的資源和當前屏幕資源不用的資源放到用戶須要時才加載，能夠大大提高重要資源的顯示速度和下降整體流量
PS：按需加載會致使大量重繪，影響渲染性能算法

LazyLoad
滾屏加載
經過 Media Query 加載

預加載

大型重資源頁面（如遊戲）可以使用增長 Loading 的方法，資源加載完成後再顯示頁面。但 Loading 時間過長，會形成用戶流失
對用戶行爲分析，能夠在當前頁加載下一頁資源，提高速度

可感知 Loading（如進入空間遊戲的 Loading）
不可感知的 Loading（如提早加載下一頁）

壓縮圖片

圖片是最佔流量的資源，所以儘可能避免使用他，使用時選擇最合適的格式（實現需求的前提下，以大小判斷），合適的大小，而後使用智圖壓縮，同時在代碼中用 Srcset 來按需顯示
PS：過分壓縮圖片大小影響圖片顯示效果

使用智圖（智圖_圖片壓縮在線工具_在線製做webp ）
使用其它方式代替圖片（1. 使用 CSS3； 2. 使用 SVG； 3. 使用 IconFont）
使用 Srcset
選擇合適的圖片（1. webP 優於 JPG； 2. PNG8 優於 GIF）
選擇合適的大小（1. 首次加載不大於 1014KB； 2. 不寬於 640（基於手機屏幕通常寬度））

減小 Cookie

Cookie 會影響加載速度，因此靜態資源域名不使用 Cookie

避免重定向

重定向會影響加載速度，因此在服務器正確設置避免重定向

異步加載第三方資源

第三方資源不可控會影響頁面的加載和顯示，所以要異步加載第三方資源

[腳本執行優化]

腳本處理不當會阻塞頁面加載、渲染，所以在使用時需當注意

CSS 寫在頭部，JavaScript 寫在尾部或異步
避免圖片和 iFrame 等的空 Src

空 Src 會從新加載當前頁面，影響速度和效率

儘可能避免重設圖片大小

重設圖片大小是指在頁面、CSS、JavaScript 等中屢次重置圖片大小，屢次重設圖片大小會引起圖片的屢次重繪，影響性能

圖片儘可能避免使用 DataURL

DataURL 圖片沒有使用圖片的壓縮算法文件會變大，而且要解碼後再渲染，加載慢耗時長

熊D注：使用 DataURL 來顯示的圖片通常尺寸都較小或結構較簡單，推薦優先使用 CSS 實現

[CSS 優化]

儘可能避免寫在 HTML 標籤中寫 Style 屬性
避免 CSS 表達式

CSS 表達式的執行需跳出 CSS 樹的渲染，所以請避免 CSS 表達式

移除空的 CSS 規則

空的 CSS 規則增長了 CSS 文件的大小，且影響 CSS 樹的執行，因此需移除空的 CSS 規則

正確使用 Display 的屬性

Display 屬性會影響頁面的渲染，所以請合理使用

display: inline 後不該該再使用 width、height、margin、padding 以及 float
display: inline-block 後不該該再使用 float
display: block 後不該該再使用 vertical-align
display: table-* 後不該該再使用 margin 或者 float

不濫用 Float

Float 在渲染時計算量比較大，儘可能減小使用

不濫用Web字體

Web 字體須要下載，解析，重繪當前頁面，儘可能減小使用

不聲明過多的 Font-size

過多的 Font-size 引起 CSS 樹的效率

值爲 0 時不須要任何單位

爲了瀏覽器的兼容性和性能，值爲 0 時不要帶單位

標準化各類瀏覽器前綴

無前綴應放在最後
CSS 動畫只用（-webkit- 無前綴）兩種便可
其它前綴爲 -webkit- -moz- -ms- 無前綴四種，（-o- Opera 瀏覽器改用 blink 內核，因此淘汰）

熊D注：出於兼容性考慮是否棄用 -o- 有待看具體項目需求

避免讓選擇符看起來像正則表達式

高級選擇器執行耗時長且不易讀懂，避免使用

熊D注：此外，嵌套過深的選擇器也應慎用，權重較大，解析速度慢且不利於 CSS 的模塊化

[JavaScript 執行優化]

減小重繪和迴流

避免沒必要要的 Dom 操做
儘可能改變 Class 而不是 Style，使用 classList 代替 className
避免使用 document.write
減小 drawImage

緩存 Dom 選擇與計算

每次 Dom 選擇都要計算，緩存他

緩存列表 .length

每次 .length 都要計算，用一個變量保存這個值

熊D注：執行過程當中，任何使用超過兩次的變量，都應考慮緩存該變量以提升執行效率

儘可能使用事件代理，避免批量綁定事件
儘可能使用 ID 選擇器

ID 選擇器是最快的

TOUCH 事件優化

使用 touchstart、touchend 代替 click，因快影響速度快。但應注意 Touch 響應過快，易引起誤操做

[渲染優化]

HTML 使用 Viewport

Viewport 能夠加速頁面的渲染，請使用如下代碼

<meta name="viewport" content="width=device-width, initial-scale=1">

減小 Dom 節點

Dom 節點太多影響頁面的渲染，應儘可能減小 Dom 節點

動畫優化

儘可能使用 CSS3 動畫
合理使用 requestAnimationFrame 動畫代替 setTimeout
適當使用 Canvas 動畫 5 個元素之內使用 css 動畫，5 個以上使用 Canvas 動畫（iOS8 可以使用 webGL）

高頻事件優化

Touchmove、Scroll 事件可致使屢次渲染

使用 requestAnimationFrame 監聽幀變化，使得在正確的時間進行渲染
增長響應變化的時間間隔，減小重繪次數

GPU 加速

CSS 中如下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）來觸發 GPU 渲染，請合理使用
PS：過渡使用會引起手機過耗電增長

熊D注：推薦拓展閱讀 > CSS動畫屬性性能 & 高性能 CSS3 動畫

參考資料

本文由 @米隨隨發表在移動H5前端性能優化指南讀後深表贊同，特來搬磚最後：感謝原做者寫的好文~敬禮~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。