Web性能優化重不重要？相信每一個從事web前端開發的人都會回答重要，畢竟Web性能優化好的網站可以給用戶帶來更好的體驗，這也意味著用戶對網站更滿意，自然也就能為網站帶來效益。那么如何進行Web性能優化呢？
1. 減少HTTP請求數：
1)資源大小很重要，不僅僅關系到下載時間，還因為IPv4和IPv6協議規定一個IP包的最大值為65535位元組。一個IP包是一次請求，于是可以得到一個等式：
根據這個公式，我們可以控制資源盡可能小。可以采取使用gulp等自動化構建工具進行自動合并JS檔案、壓縮檔案和圖片等手段。
2) 避免重定向：重定向說明需要客戶端采取進一步操作才能完成請求，請求時間就會延長。所以輸入URL時應使用最完整的、最直接的地址，比如輸入www.baidu.com而不是baidu.com。
3) 使用快取機制：主要有資料庫快取、服務端快取(反向代理和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的優化主要要求web前端人員對頁面渲染原理有清晰的了解、對基礎知識的掌握和良好的編程習慣。
3) CSS優化：比如減少使用通配符‘*’，提取公用樣式增強可復用性，選擇器準確可減少匹配時間，適度使用行內樣式。
uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/103996.html
標籤：HTML(CSS)