好程式設計師分享Web前端效能最佳化

　　 好程式設計師分享Web 前端效能最佳化 ， Web 前端效能最佳化的結果直接影響到使用者體驗，而使用者體驗則與網站的滿意度息息相關，所以， Web 前端的最佳化非常重要。雖然 Web 前端工程師也把這項工作當做重中之重，但是令他們感到棘手的是不知道從哪些方面去著手最佳化。其實 Web 前端最佳化並不難 , 只需要掌握一些實用的技巧，就可以輕鬆應對。接下來，為大家提供一些最佳化的方法。

 

 

　　一、減少HTTP 請求數

 

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

 

　　(2) 使用快取的機制：主要有資料庫快取、服務端快取 ( 反向代理和 CDN 快取 ) 、瀏覽器快取。

 

　　二、圖片懶載入

 

　　在頁面圖片非常多的情況下，可以使用懶載入。只載入第一屏的圖片，當使用者透過滾動訪問後面的內容時再載入相應圖片。方法是先用一張極小的佔點陣圖代替圖片，佔點陣圖只需下載一次，將原本圖片的src 儲存在另一個屬性中，判斷當圖片快進入可視區域就將路徑賦值給 src 並下載圖片進行展示。

 

　　三、程式碼的最佳化

 

　　(1) 頁面的結構： CSS 放在 HTML 內容上部， JavaScript 放在 HTML 內容下部。可以使用 preload 提前解析資源的 DNS 。由於瀏覽器是自上而下讀取內容的，因此放置資源的位置會影響網站的訪問速度。比如，如果將 script 標籤放在 HTML 內容的前邊，瀏覽器就會先呼叫 JavaScript 直譯器對 JS 進行解析，完成之後才會渲染其餘的 HTML 內容。對使用者而言，能看到的是 HTML 的內容，所以這麼做會導致頁面可用性的延遲。

 

　　(2)JavaScript 最佳化：比如減少對 DOM 的操作，減少重排和重繪，減少作用域鏈查詢，慎用 eval 函式等。 JS 程式碼和 CSS 的最佳化要求前端開發人員對頁面渲染原理清晰瞭解以及對基礎知識掌握紮實。

 

　　(3)CSS 最佳化：減少使用萬用字元，提取公用樣式增強可複用性，選擇器準確可減少匹配時間，適度使用內聯樣式。

 

其實更多情況下，Web 前端最佳化的難易程度取決於你的熟練程度以及實操經驗。