如何進行頁面優化？

爲何要進行頁面優化？

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操做

加註釋