Web前端的優化是非常重要的，也是每一位Web前端開發工程師所重視的，畢竟Web前端性能優化的好與否是直接影響到用戶體驗的。用戶體驗的好與否是直接影響用戶對網站的滿意度的。Web前端性能優化的好的網站才能達到理想中的效益。

[[270758]]

那么在Web前端性能優化的時候怎么做才比較好呢?Web前端性能優化有沒有什么技巧呢，以下為大家推薦三個Web前端性能優化的實用技巧。

1、減少HTTP請求數：

(1)避免重定向：重定向就是說明需要客戶端采取進一步操作才能完成請求，請求時間就會延長。所以輸入URL時應使用最完整的、最直接的地址，比如輸入www.baidu.com而不是baidu.com。

(2)使用緩存的機制：主要有數據庫緩存、服務端緩存(反向代理和CDN緩存)、瀏覽器緩存。

2、圖片懶加載

頁面的圖片非常的多，可以使用懶加載。只加載***屏的圖片，當用戶通過滾動訪問后面的內容時再加載相應圖片。方法是先用一張極小的占位圖代替圖片，占位圖只下載一次，將原本圖片的src存儲在另一個屬性中，判斷當圖片快進入可視區域就將路徑賦值給src并下載圖片進行展示。

3、代碼的優化

(1)頁面的結構：CSS放在HTML內容上部，JavaScript放在HTML內容下部。可以使用preload提前解析資源的DNS。由于瀏覽器是自上而下讀取內容的，因此放置資源的位置會影響網站的訪問速度。比如，如果將script標簽放在HTML內容的前邊，瀏覽器就會先調用JavaScript解釋器對JS進行解析，完成之后才會渲染其余的HTML內容，對用戶來說，能看到的是HTML的內容，所以(1)這么做會導致頁面可用性的延遲。另外，CSS是對頁面節點進行修飾的，如果CSSOM未構建之前就進行了布局，等到CSSOM構建出來，如果CSS修改了節點的布局，就會發生重排，需要重新計算布局并繪制。

(2)JavaScript優化：比如減少對DOM的操作，減少重排和重繪，減少作用域鏈查找，慎用eval函數等等。JS代碼和(下面的)CSS的優化主要要求前端開發人員對頁面渲染原理有清晰的了解、對基礎知識的掌握和良好的編程習慣。

(3)CSS優化：比如減少使用通配符‘*’，提取公用樣式增強可復用性，選擇器準確可減少匹配時間，適度使用內聯樣式。