移動端網頁性能優化自查表

時間 2019-11-08

標籤移動網頁性能優化查表欄目無線简体版

原文原文鏈接

1、網絡加載

一、DNS預加載php

經過dns-prefetch屬性可讓瀏覽器提早解析資源或接口對應的服務器IP地址，避免在請求中發起DNS解析請求，節省請求時間css

二、資源預加載html

利用preload，prefetch，preconnect屬性咱們能夠在<head>內部聲明式的書寫資源獲取請求，提早加載非首屏但又較重要的資源，避免在知足首屏優先加載的狀況下，反而忽略了其餘次重要資源的加載前端

三、使用CDN資源，而且注意http緩存頭的設定webpack

HTTP緩存包括強緩存（Cache-Control，Expire）和協議緩存（Last-modified, Etag）兩種。其中，協議緩存資源每次都會像服務端發送請求來判斷資源是否過時，未過時則返回304，在網絡極其卡頓的狀況下，這個304請求有可能堵塞整個頁面的資源加載git

四、對JS資源按照模塊和首屏需求進行優先加載，不須要的模塊按需加載github

移動端的網絡資源有限，爲了儘快讓用戶看到有意義的首屏，咱們須要儘量的保持首屏須要加載的資源越小越好web

五、內聯首屏關鍵CSS算法

將首屏關鍵樣式內聯至頁面中，保證最快速度看到帶有基本樣式的首屏，避免用戶端出現較長時間的白屏時間編程

六、內聯關鍵JS代碼

內聯關鍵代碼也是爲了讓用戶第一時間感覺到頁面已經加載成功，可是內聯代碼不能將全部代碼都內聯至HTML中，由於這些代碼每次都會伴隨HTML下載下來，加大HTML文件的體積，也沒法讓代碼在不一樣的網頁間提供複用的功能

七、檢查服務端下發的資源是否使用GZIP壓縮

GZIP對於文本資源（JS，CSS文件）有較高的壓縮效率，一般能夠減小70%的體積

八、避免資源的重定向

增大加載時間，用戶體驗較差

九、異步延遲加載第三方非關鍵代碼

移動端網絡資源有限，爲了讓這些不重要的代碼不影響首屏渲染，能夠延遲一小段時間在加載

十、合理的使用本地緩存，避免把沒必要要的數據所有放到COOKIE當中

每一次AJAX請求都會將當前域名中的全部COOKIE值傳遞給服務端

十一、使用service worker，增長頁面的離線體驗和頁面的加載體驗

頁面發送請求時，會先通過SW的腳本，這樣可讓咱們經過編程的方式來制定咱們須要緩存的文件，同時，緩存在service worker中的文件，可讓用戶離線訪問

十二、在條件容許的狀況下，可使用HTTP2.0協議

HTTP2.0協議能夠提高網絡鏈路的複用性，提高資源加載效率

2、HTML

一、注重標籤的語義化，保持用最簡潔的標籤完成所需的功能

標籤的語義化提升代碼的可維護性，在頁面加載CSS失敗時也不至於很難看。同時，須要保持標籤最小化，無心義的標籤能夠利用僞類表示

二、CSS放到head中，JS到body尾部，JS,CSS都須要放在head中時，JS放在前面

一、CSS會阻塞頁面的渲染，不阻塞DOM的解析；二、JS會阻塞DOM的解析，可是，瀏覽器會預先下載資源；三、瀏覽器在遇到script標籤時會觸發頁面渲染，若是這時CSS還沒有加載完成，頁面將會等待CSS加載完成後在執行

三、HTML代碼壓縮，去除註釋、空白符

減小網絡傳輸的文件大小

四、儘可能避免使用iframe

iframe 內資源的下載進程會阻塞父頁面靜態資源的下載與 CSS 及 HTML DOM 的解析

3、CSS

一、壓縮CSS代碼，排除重複的CSS樣式

減小網絡傳輸的文件大小

二、根據組件打包CSS文件

按需加載，減小網絡傳輸的文件大小

三、避免使用CSS的@import語法

可能阻塞頁面的加載

四、使用Sass、Stylus、Less等預編譯語言時，編碼CSS嵌套不超過3層

提升解析css的效率

五、使用autoprefixer給CSS代碼自動增長前綴

自動幫助咱們添加瀏覽器頭，避免意想不到的瀏覽器兼容性問題

六、儘可能少使用css通配符，特別是多層嵌套的末尾使用通配符

CSS的解析過程是從右往左逆向匹配，使用CSS通配符會增長解析的計算量

七、不要濫用高消耗的樣式

box-shadow、border-radius、filter這些屬性繪製前都須要瀏覽器進行大量的計算

4、動畫

一、簡單動畫儘可能只使用transform、opacity、transition等屬性完成

width、height、top、left、right、bottom、margin等屬性的變動都會觸發頁面的重排，在移動端環境中頻繁的重排會致使動畫卡頓

二、較複雜動畫可使用css幀動畫

在移動端兼容性好、性能好、更具備可操控性

三、js動畫不要使用setTimeout、setInterval，使用requestAnimationFrame

setTimeout和setInterval在動畫執行存在性能問題，且沒法準確的控制幀數

四、對將要使用動畫的部分，開啓GPU硬件加速（注意不要濫用）

對開啓GPU硬件加速的標籤，瀏覽器將把他提高到一個單獨的圖層，並經過GPU進行預處理

五、使用will-change屬性（注意不要濫用）

will-change的做用告訴瀏覽器哪些屬性將要變化，讓他能夠提早作好準備

5、JavaScript

一、JS代碼壓縮，代碼分模塊加載

減小代碼大小，根據頁面需求按需加載資源，最下化用戶須要加載的資源大小加快頁面展現的速度

二、處理長列表或者大量DOM元素時，不要綁定太多的事件監聽函數

節省內存和減小監聽事件的註冊

三、利用throttle和debounce函數去處理頻發觸發，可是不須要頻發執行的函數，例如scroll,touchmove

避免頻繁的無效的操做，避免頁面的卡頓

四、利用setTimeout代替setInterval

setInterval可能存在指令堆積的問題，致使頁面卡頓

五、儘可能避免大批量的重排重繪

頁面的重排重繪很耗性能，尤爲是重排

6、圖片

一、使用工具壓縮圖片

移動端網絡條件有限，圖片越大加載時間越長，合理使用工具壓縮圖片，能夠兼顧圖片質量和圖片大小

二、使用較高壓縮比格式的文件webp

減小文件傳輸的大小，避免出現圖片尺寸使用不當的問題，小icon用大圖

三、使用雪碧圖

減小http請求數，不過當咱們的http協議升級至1.1，2.0以後，雪碧圖減小http請求數的效果並不明顯

四、圖片懶加載

避免用戶提早加載過多無用的資源，浪費用戶流量

五、根據不一樣的屏幕像素比加載不一樣尺寸的圖片

在較大像素比的屏幕下加載小尺寸的圖片，圖片會模糊；在較小像素比的屏幕下加載大尺寸的圖片，會浪費用戶流量和cdn流量

六、小於2KB的圖片能夠嘗試使用base64格式去替換

將圖片轉換成base64格式能夠減小http請求數量，可是，不能對較大尺寸的圖片使用base64格式，由於base64算法會提高三分之一的文件大小

7、字體

一、壓縮字庫大小，避免加載過多無用的資源，推薦工具字蛛

咱們只須要頁面須要的字體文件便可，不須要浪費流量加載用戶不須要的資源

二、優化字體的展現策略

使用font-display屬性能夠避免在字體加載過程當中，不顯示文字的問題

三、當特殊文字量較少且內容固定時，能夠嘗試使用圖片代替

快速完美的還原界面

8、其餘

一、對於整個頁面資源需求量較大時，可使用骨架屏或者增長loading效果

增強用戶體驗，加速首屏體驗，經過有意義的ui讓用戶提早獲得反饋

二、lighthouse性能跑分

Google推出的網頁性能跑分工具，能夠較全面的瞭解網站的性能

三、經過Chrome的控制面板code coverage部分，找到未使用代碼的比例

幫助咱們快速找到首屏未使用的代碼

四、經過構建工具中使用Scope Hoisting

這裏以webpack舉例，使用Scope Hoisting後打包的文件，文件體積更小，代碼運行時建立的函數做用域更少，提高JS的啓動速度

參考

相關標籤/搜索

每日一句

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