如何進行頁面優化？

為什麼要進行頁面優化？

1. 更快：頁面載入更快，客戶感知更快;

2. 更易於閱讀：易於搜尋引擎抓頁面重點，易於盲人閱讀;

3. 更易於維護：易於自己和同事後期讀懂、定位、修改和擴充套件程式碼.

如何進行頁面優化

html

• 語義化

• 載入順序:css放head裡面(使用者看到順暢頁面)，js放尾部（會阻塞dom渲染，且dom樹沒搭建好時，js裡面的dom操作會有問題）

• 減少頁面請求：合併img,合併css，避免使用@import方式引入css檔案

• 減少檔案大小：

  • 主要減少img檔案大小，選用合適的格式並且用工具進行壓縮(ImageOptim,ImageAlpha,JPEGmini)

  • 刪除不必要的標籤

css

• 選擇器：越簡單越短越好,同樣的樣式進行選擇器合併

• css值縮寫：margin等，值為0的省略單位,

• 減少檔案大小:YUI Compressor,cssmin

• 少用耗效能的屬性:expresion,border-radius,filter,box-shadow,gradients等

• 圖片設定寬高，不要縮放，減少瀏覽器的迴流和重繪。

• 所有表現用css實現

• 模組化

• 命名規範、語義化

• 儘量減少hack

javascript

• 頁面懶載入

• 少用dom操作

加註釋