1. 程式人生 > >好程式設計師分享Web前端效能優化

好程式設計師分享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前端優化的難易程度取決於你的熟練程度