web前端性能優化

web前端包括瀏覽器加載、網站視圖模型、圖片服務、CDN服務等，主要優化手段有瀏覽器訪問、使用反向代理才、CDN等。

瀏覽器訪問優化：

減小HTTP請求

 http協議是無狀態的應用層協議，意味着每次http請求都須要創建通訊鏈路、進行數據傳輸，而在服務器端，每一個http都須要啓動獨立的線程去處理。這些通訊和服務的開銷都很昂貴，減小http請求的數目可有效提升訪問性能。

一、合併css

二、合併js

三、合併圖片

四、合理設置緩存，css,javascript,logo,圖標等更新頻率低的靜態資源，可直接經過HTTP Header的cache-control和Expires設置很長的過時頭；變化不頻繁又可能會變的資源用Last-Modifed作請求驗證，儘量讓資源在緩存中待更久。若是須要更新應一個個文件逐步更新，並有必定的時間間隔，以免瀏覽器突然大量緩存失效，或形成網絡堵塞，服務器負載增長的狀況。

五、懶加載

六、css放上面，js放下面，頁面解析時須要用到js，再放底部就不適合了。

七、異步請求callback

 

通用性能清單：

一、合理設置緩存

二、啓用壓縮

三、優化關鍵資源的優先級(srcset)

四、使用CDN

 

圖片優化：

一、不必的圖片消除，合併，或用代碼構造，陰影、漸變、動畫、形狀等

二、

• JPEG：顏色很是豐富的圖片（例如照片）
• PNG–8：色彩相對單一的圖片
• PNG–24：局部透明的圖片
• GIF：動圖

三、試用新格式：WebP、JPEG 2000 和 JPEG-XR，無損的 WebP 比 PNG 小26％，比 JPG 小25-34％

 

WEB字體優化：

4種網絡字體格式：EOT、TTF、WOFF 和最近的 WOFF2。TTF 和 WOFF 被普遍使用，擁有超過90％的瀏覽器支持率。根據支持狀況，最有可能安全地使用WOFF2，並在舊版瀏覽器降級使用 WOFF。使用WOFF2的優勢是，一套定製的預處理和壓縮算法（如Brotli），並有大約30％的文件大小減小和改進的解析能力。

在@font-face中定義網頁字體的來源時，請使用format()提示來指定應使用哪一種格式。

 

。。。。。。