網頁資源加載的優化方法

概述

參考自谷歌的教程
網站的加載性能能夠從減小網絡延遲、減小資源數量、減小資源體積和使用緩存 4 個方面來進行優化。

1. 減小網絡延遲與網絡請求

1. 避免使用着陸頁進行重定向。
   重定向會致使額外的HTTP請求，形成網絡延遲，拖慢網頁的呈現。重定向也可能形成額外的DNS查找，TCP握手和TLS協商。
2. 合併資源，減小網絡請求
   合併資源，最多見的就是sprite精靈圖了。
   此外，還能夠合併一下 CSS 和 JS 代碼。

2. 控制資源下載數量

訪問一個網頁時，所請求的資源必定要都是有用的，避免無用的資源請求，如：

1. 多餘的`js`文件，`css`文件
2. 多餘的圖片請求
3. 多餘的字體請求

3. 資源體積的優化

網站用到的資源主要有：

• 文字類資源，如js， css 和 html；
• 圖像類資源，各類圖片

3.1 文字類資源的優化

1. 首先固然是本身要寫出優質、簡潔的代碼了。

2. 其次，對於 js文件，html文件，css文件，要進行文件最小化處理，去除文字間的空格、換行，進行變量名的替換等等。
   這些工做通常都是在前端工程打包時進行的， 如：

   • HTML 文件使用 HTMLMinifier；
   • CSS 文件在 Webpack 打包時，對 loader 配置minimize；
   • JS 文件使用UglifyJsPlugin 插件；
3. 接下來就是使用GZIP對文件進行編碼壓縮了。
   現代瀏覽器均可以接受 gzip 格式的文件，咱們要作的就是對服務端進行配置。

3.2 圖像類資源的優化

1. 選擇正確的圖片格式
   雖然常常說png 圖片比 jpge 圖片能更好的表現攝影圖像，可是對於不少圖片來講，png格式的圖片，轉化爲 jpeg 格式後，對於圖片的清晰度並無特別大的影響，可是體積卻能大大減小。
2. 移除沒必要要的元數據
   某些拍出來的照片會含有元數據，就是描述數據的數據。元數據會描述圖片拍攝的設備信息，時間戳，圖片尺寸等，這對於某些網頁圖片來講不是很重要，因此咱們能夠剔除掉這些元數據。
   嘗試下這個網站VerExif。
3. 減少圖片的尺寸
   某些狀況下，\<img\> 標籤或標籤的背景即便用了大圖，其在實際網頁中的尺寸也很小，這時使用大圖就是形成資源的浪費了。這是能夠對圖片尺寸進行重設， 好比將1200 x 600 像素的圖片改成 600 x 300 像素。

4. 下降圖片質量
   在某些狀況下，下降圖片的質量並不會形成任何視覺上的差異，卻能減小大量的體積。
   有不少處理圖片質量的軟件，如：

   • XNConvert
   • ImageOptim
   • Resizelt

     更多參考這裏。

5. 圖片壓縮
   儘管對圖片使用gzip壓縮沒什麼效果，可是仍是有不少軟件能夠在不影響圖片尺寸和視覺質量的狀況下，對圖片進行壓縮的，好比這個網站。
   更多網站能夠參考[這裏](

http://enviragallery.com/9-be...。

4. 使用HTTP緩存

嚴格來講，這也算減小請求次數，可是實現方式是徹底不同的。
使用HTTP緩存，是設置適當的緩存策略，從而能夠避免瀏覽器重複地向服務端請求資源。
HTTP緩存主要是服務端設置正確的響應頭信息。
緩存分爲兩種：強緩存 和協商緩存。

4.1 強緩存

強緩存是指瀏覽器直接使用存在本地的資源，而再也不向服務端進行請求。涉及到的響應頭有兩個： Expires 和 Cache-control 。
Expires 是http 1.0的內容，其內容是服務端設置的一個具體的時間點， 如Expires: Wed, 21 Oct 2015 07:28:00 GMT, 無需過多瞭解。
Cache-control 是http 1.1 新增的頭部，其值爲下列指令之一或組合：

• no-cache ：代表瀏覽器能夠對內容進行緩存，可是必須先向服務器確認，資源未改變的狀況下，能夠直接使用瀏覽器的緩存。與 no-store 互斥；
• no-store : 代表內容不容許緩存，包括瀏覽器以及中間設備，如代理服務器等，與no-cache 互斥；
• public : 代表緩存能夠存在於瀏覽器和中間設備，與 private 互斥；
• private ：代表緩存只能存在於客戶的瀏覽器中；
• max-age: 以秒爲單位的時間範圍，代表通過多長時間以後，緩存內容將過時。過時以後，瀏覽器必須從新下載資源。

設置強緩存以後，瀏覽器每次請求就會使用本地緩存的內容或者根據返回的頭部信息去瀏覽器驗證。

4.2 協商緩存

當服務端對資源不設置強緩存時，可使用協商緩存。開啓協商緩存的方式有兩種：

1. Last-Modified 與 If-Modified-Since;
2. Etag 與 If-None-Match;

兩組頭部信息的名字，都很語義化，下降了理解的難度。

4.2.1 Last-Modified 與 If-Modified-Since

服務端設置 Last-Modified 響應頭, 代表資源最後修改的時間，這個值是一個時間點。瀏覽器請求時，會帶上一個頭信息 If-Modified-Since，其值爲Last-Modified 的值。 服務器對比資源的上一次修改時間和 If-Modified-Since 所表示的時間，若是未曾改變，就返回304。

4.2.1 Etag 與 If-None-Match

服務端設置 Etag 響應頭, 代表資源的的惟一標識字符串，只要資源被修改過，就會從新生成一個Etag。瀏覽器請求時，會帶上一個頭信息 If-None-Match，其值爲Etag 的值。 服務器對比資源當前的Etag和 If-None-Match 的值，若是一致，就返回304。