前端代碼的一些惡優化

深刻理解http請求的過程是前端性能優化的核心

css 樣式表置頂

用 link 代替 import

js 腳本置底

合理使用 js 的異步加載能力

link 和import的使用區別

　　區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。

　　區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。

　　區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

　　區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。

控制重繪與迴流

根據場景選擇合適的圖片格式

1. jpg有損壓縮，壓縮率高，不支持透明  —— 大部分不須要透明圖片的業務場景 
2. png支持透明，瀏覽器兼容好 —— 大部分須要透明圖片的業務場景
3. webp壓縮程度更好，在ios webview有兼容性問題 —— 安卓所有 
4. svg矢量圖，代碼內嵌，相對較小，圖片樣式相對簡單—— 圖片樣式相對簡單的業務場景　　（

   使用iconfont解決icon問題

   ）

進行圖片壓縮 css雪碧圖 將圖片內簽到網頁中

 

請求過程當中一些潛在的性能優化點 （減小http請求數量 減小請求資源的大小）

1. dns是否能夠經過緩存減小dns查詢時間？
2. 網絡請求的過程走最近的網絡環境？
3. 相同的靜態資源是否能夠緩存？
4. 可否減小請求http請求大小？
5. 減小http請求 服務端渲染

文件的壓縮   利用網上在線工具壓縮css js html等資源

pwa 的應用 service worker