關於web最佳化(一)

標籤：dcs   關閉   動態   api   encoding   伺服器   方式   寬度   傳輸資料   

我們所說的web，無非就是html，css(web font, image)，JavaScript。

 

HTML最佳化建議：

1. 盡量不要用table進行布局。

2. 盡量用最新的帶有語義的h5標籤，這樣在解析跟渲染時更快。

3. 使用塊傳輸資料，web伺服器回應標頭設定：Transfer-Encoding: chunked

4. 預先處理DNS，DNS緩衝。可以通過link標籤增加rel=“dns-prefetch”,如：<link rel="dns-prefetch" href="//google-analytics.com" >

5. html壓縮：

　　a. 刪除所有空白字元，包括spaces，tabs，newline等。

　　b. 刪除簡單值的引號。

　　c. 刪除可選的關閉標籤，如：</body>,</p>,</li>

　　d. 盡量使用短一點的id標識

 

CSS最佳化建議：

1. 用外部CSS檔案。

2. 非同步載入CSS,可以藉助loadCSS，AsyncLoader等這些工具。或者動態建立link標籤實現。

3. 壓縮CSS檔案，包括web字型的壓縮。

4. 儘可能早的載入web字型，可以在html檔案的style標籤定義字型，如下：

<style>    @font-face{        font-family: my-font;        src: url(my-font.woff);     }</style>

5. 可以使用FontFace API動態載入字型。

 

JAVASCRIPT最佳化建議：

1. JS壓縮。

2. 非同步載入，可以借用requireJS，可以動態建立script標籤。

3. <script>:js在載入時會阻塞其他資源的下載渲染；<script defer>:js在載入時不會阻塞其他資源的下載渲染，js載入完不會立即執行，而是等到所有其他資源下載完成js才會執行，適合js有其他依賴的情況；<script async>:js在載入時不會阻塞，js載入完會立即執行，執行的時候回阻塞。

4. DOMContentLoaded事件會在load事件之前觸發。

 

IMAGE：

1. 給img標籤設定寬度高度可以提升渲染效能，如：<img src="logo.png" width="300" height="100" alt="Logo">

2. 對於小表徵圖可以使用data url方式內聯載入。轉換為base64後的字元大小一般會比圖片本身大30%，但有web伺服器一般啟用gzip，gzip會壓縮base64進行傳輸，所以結果反而甚至會小很多。

3. 選擇正確的圖片格式及圖片壓縮率，新的圖片格式：jpeg-xr，webp，apng

4. 合并圖片減少請求數，需考慮圖片個數與合并後圖片的大小平衡問題，一般不要超過10個圖片的合并。

 

總結：

1. 伺服器端支援http/1.1，支援壓縮(gzip等)。

2. 盡量減少請求數量，實現資源共用。

3. 支援塊傳輸，以便儘可能早解析html並發現內聯的請求。

4. 支援DNS緩衝，預查詢DNS。

5. 儘可能減少CSS檔案大小及個數（CSS壓縮）

6. 使用新的高效能的js載入工具，如requirejs。

7. 最佳化圖片的大小，減少網路佔用。

關於web最佳化(一)