一、網路載入
1、DNS預載入
通過dns-prefetch屬性可以讓瀏覽器提前解析資源或介面對應的伺服器IP地址，避免在請求中發起DNS解析請求，節省請求時間
2、資源預載入
利用preload，prefetch，preconnect屬性我們可以在
<內部宣告式的書寫資源獲取請求，提前載入非首屏但又較重要的資源，避免在滿足首屏優先載入的情況下，反而忽略了其他次重要資源的載入
head>
3、使用CDN資源，並且注意http快取頭的設定
HTTP快取包括強快取（Cache-Control，Expire）和協議快取（Last-modified, Etag）兩種。其中，協議快取資源每次都會像服務端傳送請求來判斷資源是否過期，未過期則返回304，在網路極其卡頓的情況下，這個304請求有可能堵塞整個頁面的資源載入
4、對JS資源按照模組和首屏需求進行優先載入，不需要的模組按需載入
移動端的網路資源有限，為了儘快讓使用者看到有意義的首屏，我們需要儘可能的保持首屏需要載入的資源越小越好
5、內聯首屏關鍵CSS
將首屏關鍵樣式內聯至頁面中，保證最快速度看到帶有基本樣式的首屏，避免使用者端出現較長時間的白屏時間
6、內聯關鍵JS程式碼
內聯關鍵程式碼也是為了讓使用者第一時間感受到頁面已經載入成功，但是內聯程式碼不能將所有程式碼都內聯至HTML中，因為這些程式碼每次都會伴隨HTML下載下來，加大HTML檔案的體積，也無法讓程式碼在不同的網頁間提供複用的功能
7、檢查服務端下發的資源是否使用GZIP壓縮
GZIP對於文字資源（JS，CSS檔案）有較高的壓縮效率，通常可以減少70%的體積
8、避免資源的重定向
增大載入時間，使用者體驗較差
9、非同步延遲載入第三方非關鍵程式碼
移動端網路資源有限，為了讓這些不重要的程式碼不影響首屏渲染，可以延遲一小段時間在載入
10、合理的使用本地快取，避免把不必要的資料全部放到COOKIE當中
每一次AJAX請求都會將當前域名中的所有COOKIE值傳遞給服務端
11、使用service worker，增加頁面的離線體驗和頁面的載入體驗
頁面傳送請求時，會先經過SW的指令碼，這樣可以讓我們通過程式設計的方式來制定我們需要快取的檔案，同時，快取在service worker中的檔案，可以讓使用者離線訪問
12、在條件允許的情況下，可以使用HTTP2.0協議
HTTP2.0協議可以提升網路鏈路的複用性，提升資源載入效率
二、HTML
1、注重標籤的語義化，保持用最簡潔的標籤完成所需的功能
標籤的語義化提高程式碼的可維護性，在頁面載入CSS失敗時也不至於很難看。同時，需要保持標籤最小化，無意義的標籤可以利用偽類表示
2、CSS放到head中，JS到body尾部，JS,CSS都需要放在head中時，JS放在前面
1、CSS會阻塞頁面的渲染，不阻塞DOM的解析；2、JS會阻塞DOM的解析，但是，瀏覽器會預先下載資源；3、瀏覽器在遇到script標籤時會觸發頁面渲染，如果這時CSS尚未載入完成，頁面將會等待CSS載入完成後在執行
3、HTML程式碼壓縮，去除註釋、空白符
減少網路傳輸的檔案大小
4、儘量避免使用iframe
iframe 內資源的下載程式會阻塞父頁面靜態資源的下載與 CSS 及 HTML DOM 的解析
三、CSS
1、壓縮CSS程式碼，排除重複的CSS樣式
減少網路傳輸的檔案大小
2、根據元件打包CSS檔案
按需載入，減少網路傳輸的檔案大小
3、避免使用CSS的@import語法
可能阻塞頁面的載入
4、使用Sass、Stylus、Less等預編譯語言時，編碼CSS巢狀不超過3層
提高解析css的效率
5、使用autoprefixer給CSS程式碼自動增加字首
自動幫助我們新增瀏覽器頭，避免意想不到的瀏覽器相容性問題
6、儘量少使用css萬用字元，特別是多層巢狀的末尾使用萬用字元
CSS的解析過程是從右往左逆向匹配，使用CSS萬用字元會增加解析的計算量
7、不要濫用高消耗的樣式
box-shadow、border-radius、filter這些屬性繪製前都需要瀏覽器進行大量的計算
四、動畫
1、簡單動畫儘量只使用transform、opacity、transition等屬性完成
width、height、top、left、right、bottom、margin等屬性的變更都會觸發頁面的重排，在移動端環境中頻繁的重排會導致動畫卡頓
2、較複雜動畫可以使用css幀動畫
在移動端相容性好、效能好、更具有可操控性
3、js動畫不要使用setTimeout、setInterval，使用requestAnimationFrame
setTimeout和setInterval在動畫執行存在效能問題，且無法準確的控制幀數
4、對將要使用動畫的部分，開啟GPU硬體加速（注意不要濫用）
對開啟GPU硬體加速的標籤，瀏覽器將把他提升到一個單獨的圖層，並通過GPU進行預處理
5、使用will-change屬性（注意不要濫用）
will-change的作用告訴瀏覽器哪些屬性將要變化，讓他可以提前做好準備
五、JavaScript
1、JS程式碼壓縮，程式碼分模組載入
減少程式碼大小，根據頁面需求按需載入資源，最下化使用者需要載入的資源大小加快頁面展示的速度
2、處理長列表或者大量DOM元素時，不要繫結太多的事件監聽函式
節省記憶體和減少監聽事件的註冊
3、利用throttle和debounce函式去處理頻發觸發，但是不需要頻發執行的函式，例如scroll,touchmove
避免頻繁的無效的操作，避免頁面的卡頓
4、利用setTimeout代替setInterval
setInterval可能存在指令堆積的問題，導致頁面卡頓
5、儘量避免大批量的重排重繪
頁面的重排重繪很耗效能，尤其是重排
六、圖片
1、使用工具壓縮圖片
移動端網路條件有限，圖片越大載入時間越長，合理使用工具壓縮圖片，可以兼顧圖片質量和圖片大小
2、使用較高壓縮比格式的檔案webp
減少檔案傳輸的大小，避免出現圖片尺寸使用不當的問題，小icon用大圖
3、使用雪碧圖
減少http請求數，不過當我們的http協議升級至1.1，2.0之後，雪碧圖減少http請求數的效果並不明顯
4、圖片懶載入
避免使用者提前載入過多無用的資源，浪費使用者流量
5、根據不同的螢幕畫素比載入不同尺寸的圖片
在較大畫素比的螢幕下載入小尺寸的圖片，圖片會模糊；在較小畫素比的螢幕下載入大尺寸的圖片，會浪費使用者流量和cdn流量
6、小於2KB的圖片可以嘗試使用base64格式去替換
將圖片轉換成base64格式可以減少http請求數量，但是，不能對較大尺寸的圖片使用base64格式，因為base64演算法會提升三分之一的檔案大小
七、字型
1、壓縮字型檔大小，避免載入過多無用的資源，推薦工具字蛛
我們只需要頁面需要的字型檔案即可，不需要浪費流量載入使用者不需要的資源
2、優化字型的展示策略
使用font-display屬性可以避免在字型載入過程中，不顯示文字的問題
3、當特殊文字量較少且內容固定時，可以嘗試使用圖片代替
快速完美的還原介面
八、其他
1、對於整個頁面資源需求量較大時，可以使用骨架屏或者增加loading效果
加強使用者體驗，加速首屏體驗，通過有意義的ui讓使用者提前得到反饋
2、lighthouse效能跑分
Google推出的網頁效能跑分工具，可以較全面的瞭解網站的效能
3、通過Chrome的控制皮膚code coverage部分，找到未使用程式碼的比例
幫助我們快速找到首屏未使用的程式碼
4、通過構建工具中使用Scope Hoisting
這裡以webpack舉例，使用Scope Hoisting後打包的檔案，檔案體積更小，程式碼執行時建立的函式作用域更少，提升JS的啟動速度