關於web優化(一)

咱們所說的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. 優化圖片的大小，減小網絡佔用。