一、網絡加載
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的啟動速度
參考
- web-performance-made-easy
- rail模型講解
- Yahoo性能優化
- Google PageSpeed Insights規則
- Google IO web性能優化筆記
- 14 Rules for Faster-Loading Web Sites
- 2018前端性能優化清單
- 2017前端性能優化清單
- 美團感官性能優化
- 前端性能優化相關
- PWA簡介
- css性能優化
關于我
我是一個莫得感情的代碼搬運工，每周會更新1至2篇前端相關的文章，有興趣的老鐵可以掃描下面的二維碼關注或者直接微信搜索前端補習班關注。
精通前端很難，讓我們來一起補補課吧！
