前端性能優化——加載頁面和靜態資源（入門級別）

最近一直在準備面試，接觸了一些性能優化方面的知識，前端性能優化主要從兩個方面進行：

1.加載頁面和靜態資源；
2.頁面渲染；

這篇文章主要講第一點：

加載頁面和靜態資源

加載頁面和靜態資源主要能夠從三個角度進行：

1. 靜態資源的合併、壓縮(http2.0時代有變)
2. 靜態資源緩存（css、img）
3. 使用CDN讓靜態資源加載更快

咱們一個一個仔細展開說。

靜態資源的合併、壓縮

---

靜態資源的合併和壓縮可以減小HTTP請求的數量和請求資源的大小。
可使用webpack或fis3進行。以fis3爲例：

// 清除其餘配置，只保留以下配置
fis.match('*.js', {
  // fis-optimizer-uglify-js 插件進行壓縮，已內置
  optimizer: fis.plugin('uglify-js')
});

fis.match('*.css', {
  // fis-optimizer-clean-css 插件進行壓縮，已內置
  optimizer: fis.plugin('clean-css')
});

fis.match('*.png', {
  // fis-optimizer-png-compressor 插件進行壓縮，已內置
  optimizer: fis.plugin('png-compressor')
});

上面就是壓縮資源的配置文件。

但http2.0中增長了不少特性，例如多路複用，也就是說在將來的前端工做中，可能靜態資源的合併就顯得沒那麼重要了！

靜態資源緩存

---

咱們在寫前端頁面的時候，常常要引入多個css、js文件，這些文件中，有一些文件是不太須要改動的，可是這些不太須要改動的文件，若是每次用戶訪問頁面都要從新加載就會很影響性能。合理的作法是對於更新頻率不過高的文件，讓用戶可以利用本地緩存。

瀏覽器緩存的分類：

1）強制緩存：緩存資源未過有效期則不須要請求資源。HTTP首部字段利用catch-control,Expires設置緩存過時時間.

Expires：

Expires: Thu, 10 Nov 2017 08:45:11 GMT

這個字段表示的是緩存到期時間

絕對時間，即服務器時間。瀏覽器會檢查當前時間，若是尚未到失效時間，則會直接使用緩存文件。可是由於這個字段中使用的是絕對時間，可能出現客戶端與服務器時間不一樣的狀況，並且客戶端用戶能夠本身修改時間。

catch-control

Cache-Control: max-age=2592000

這個字段表示的也是過時時間，以上面爲例就是2592000s後過時。可是它用的是相對時間，即便客戶端時間改變，相對時間也不會隨之改變，這確保服務器和客戶端的時間一致性。

2）對比緩存：從緩存中獲取對應的數據標識，而後向服務器發送請求，確認數據是否更新，若是已經更新，則返回新數據和新緩存，若是沒有更新，則返回304狀態碼，通知客戶端緩存未更新，可使用緩存。經過HTTP的last-modified,Etag字段判斷。對比緩存和強制緩存相比，更加適合於一些常常要更新的資源文件。

Last-Modified:

Last-Modified: Thu, 10 Nov 2015 08:45:11 GMT

第一次請求資源時，服務器返回最後一次更新資源時間。瀏覽器下一次請求資源時，就會發送If-Modified-Since字段。

If-Modified-Since：再次請求時，請求頭中帶有該字段，服務器會將If-Modified-Since的值與Last-Modified字段進行對比，若是相等，則表示未修改，響應304，讓瀏覽器利用緩存；反之，則表示修改了，緩存過時，響應200狀態碼，返回數據。

這個字段能夠和Cache-Control配合使用。

可是他仍是有必定缺陷的：

若是資源更新的速度是秒如下單位，那麼該緩存是不能被使用的，由於它的時間單位最低是秒。
若是文件是經過服務器動態生成的，那麼該方法的更新時間永遠是生成的時間，儘管文件可能沒有變化，因此起不到緩存的做用。

Etag

Etag存儲的是資源的實體標識(通常都是hash生成的，哈希字符串)，服務器存儲着文件的Etag字段，當資源內容更新的時候，Etag會變。服務器能夠在與每次客戶端傳送If-no-match的字段進行比較，若是相等，則表示未修改，響應304；反之，則表示已修改，響應200狀態碼，返回新資源。

下面是打開了segmentfault上的一個網頁，而後從新刷新頁面的狀況。

使用CDN讓靜態資源加載更快

---

在不一樣地域的用戶請求資源（訪問網站）的響應速度具備很大的差別，爲了提升用戶體驗，咱們在用戶和服務器中間加了一層，就是CDN。CDN（Content Delivery Network），它的思想就是將源站的內容分發到最接近用戶的網絡邊緣節點，讓用戶可以就近取得所需的內容，提升用戶訪問的響應速度。

當用戶發起HTTP請求時，經過CDN向邊緣節點服務器發起請求，邊緣節點會檢測當前節點是否具備你想請求的數據，若是沒有就去源站，若是有請求數據就會進一步判斷，這個數據是否在有效期，根據是否過時來決定。（具體的過程更復雜一點，涉及負載均衡等，下面一篇文章會詳細講）