高效前端：加快頁面開啟速度
阿新 • • 發佈：2019-01-09
- head中的js會引起堵塞，阻礙DOM的渲染，可以使用以下方法代替；
（1）將script標籤放在body後面
（2）給script標籤新增defer屬性，添加了defer屬性之後，引入的js檔案會變為非同步載入形式，而執行的時機在於document的readyState==interactive(可互動）之後，DOMContentLoaded事件之前。同時，加上defer之後，資源的優先順序將會變的最低（優先順序影響資源的載入順序，優先順序高的就算在後面也會先載入），img的優先順序都會比defer高。 - 儘量減小head中的css資源
（1）不要在css檔案中使用太多的base64，將一張圖片轉化為base64會大大增加檔案的體積；
（2）如果css檔案內容比較少，就10k20k左右，也可以考慮寫成內聯樣式處理。這種寫法雖然對快取不太有利，但是對於首屏載入速度卻能夠提高不少; - 優化網頁中的圖片
（1）使用img標籤的srcset屬性可以設定不同dpr下載入不同的圖片資源
表示在dpr為1時載入test(1)資源，dpr為2時載入test(2)資源，其他情況下使用src中的資源。<img srcset="images/test(1).jpg 1x,images/test(2).jpg 2x" src="images/test(3).jpg" alt="">
但是srcset屬性可能存在相容問題
還可以使用picture標籤(picture標籤中必須要有img標籤，否則不顯示)
（2）使用圖片懶載入；<picture> <source srcset="images/test(1).jpg" media="(max-width:800px)"> <source srcset="images/test(2).jpg" media="(min-width:901px)"> <img src="images/test(3).jpg" alt=""> </picture> - 壓縮與快取（需要nginx配置）
（1）gzip壓縮程式碼
（2）cache-control，在nginx中配置Last-Modified之後，nginx的http響應頭就會返回html檔案的最近修改時間，這樣就會可以判斷檔案是否已被更改，是否需要重新請求資源。
（3）使用etag
（4）使用http2，http2主要的優勢在於對於一個域只會建立一個TCP連線，多路複用，傳輸多個資源，就不需要使用類似於spirit，合併js/css等技術減少請求數了，可以做到同時載入多個資源。 - 其他優化方式
（1）使用dns預讀取
在head中加上這些link標籤就可以對相應的域名提前進行dns解析，並且由於是並行操作，不會阻礙頁面的渲染。<link ref="dns-prefetch" href="https://www.google.com"> <link ref="dns-prefetch" href="https://www.baidu.com">
（2）html優化，可以通過對html去空格處理優化。
