web前端資源文件的部署和優化

如今網上也有不少關於前端文件加載的性能優化，我相信大部分的前端程序猿，應該都據說過雅虎的14條優化原則

1. 儘量的減小 HTTP 的請求數    content
2. 使用 CDN（Content Delivery Network）    server
3. 添加 Expires 頭(或者 Cache-control )    server
4. Gzip 組件    server
5. 將 CSS 樣式放在頁面的上方    css
6. 將腳本移動到底部（包括內聯的）    javascript
7. 避免使用 CSS 中的 Expressions    css
8. 將 JavaScript 和 CSS 獨立成外部文件    javascript css
9. 減小 DNS 查詢    content
10. 壓縮 JavaScript 和 CSS (包括內聯的)    javascript css
11. 避免重定向    server
12. 移除重複的腳本    javascript
13. 配置實體標籤（ETags）    css
14. 使 AJAX 緩存複製代碼

有些人經過這14個規則總結了一下:

優化方向	優化手段
請求數量	合併腳本和樣式表，CSS Sprites，拆分初始化負載，劃分主域，字體圖標，雪碧圖片等
請求帶寬	開啓服務器GZip，精簡JavaScript，移除重複腳本，圖像優化（包括圖片大小kb）
緩存利用	使用CDN，使用外部JavaScript和CSS，添加Expires頭，減小DNS查找，配置ETag，使AjaX可緩存
頁面結構	將樣式表放在頂部，將腳本放在底部，儘早刷新文檔的輸出
代碼校驗	避免CSS表達式，避免重定向

前端資源的優化

今個主要說一下資源部署和優化的一些方案，也借鑑了好多人的理解和圖來講一下

一、資源的預加載（prebrowsing）

預加載是瀏覽器對未來可能被使用資源的一種暗示，一些資源能夠在當前頁面使用到，一些可能在未來的某些頁面中被使用。做爲開發人員，咱們比瀏覽器更加了解咱們的應用，因此咱們能夠對咱們的核心資源使用該技術。

咱們可使用該技術來預先告知瀏覽器某些資源可能在將來會被使用。

• DNS 預解析dns-prefetch

  Head頭部裏面加入：
  <link rel="dns-prefetch"href="//example.com">
  # 請求這個域名下的文件時就不須要等待DNS查詢了,也就是說在瀏覽器請求資源時，DNS查詢就已經準備好了
  # 該技術對使用第三方資源特別有用，好比jquery等複製代碼

• 預鏈接 Preconnect

  # 與 DNS 預解析相似，preconnect 不只完成 DNS 預解析，同時還將進行 TCP 握手和創建傳輸層協議
  <link rel="preconnect" href="http://example.com">複製代碼

  現代瀏覽器都試着預測網站未來須要哪些鏈接，而後預先創建 socket 鏈接，從而消除昂貴的 DNS 查找、TCP 握手和 TLS 往返開銷。然而，瀏覽器還不夠聰明，並不能準確預測每一個網站的全部預連接目標。好在，在 Firefox 39+ 和 Chrome 46+ 中咱們可使用 preconnect 告訴瀏覽器咱們須要進行哪些預鏈接。

• 預獲取 Prefetching

  # 顧名思義，提早加載資源（未用到），首先要肯定這個資源必定會在將來用到，而後提早加載，放入瀏覽器緩存中
  <link rel="prefetch" href="image.png">複製代碼

  prefetch很適用於優化webfonts的性能，但預獲取還依賴於一些條件，某些預獲取可能會被瀏覽器忽略，例如從一個很是緩慢的網絡中獲取一個龐大的字體文件。而且，Firefox 只會在瀏覽器閒置時進行資源預獲取。

• 優先級Subresource

  這個也是預獲取方式，只是不一樣的是，指定的預獲取資源具備最高的優先級，在全部 prefetch 項以前進行

  <link rel="subresource" href="styles.css">複製代碼

• 預渲染 Prerender

  # Prerender 預先加載的資源文件，也就是說可讓瀏覽器提早加載指定頁面的全部資源
  <link rel="prerender" href="http://example.com/index.html">複製代碼

• 將來 Preload

  # Preload 建議容許始終預加載某些資源，不像prefetch有可能被瀏覽器忽略，瀏覽器必須請求preload標記的資源
  <link rel="preload" href="http://example.com/image.png">
  # 存在兼容性複製代碼

  以上是預加載的基本解釋，詳細查看詳解文章

二、利用304本地緩存資源文件

咱們你們都知道，正常的網絡請求的返回狀態是200，若是咱們每次訪問頁面以後，都要去加載，這樣就會浪費帶寬，影響頁面的性能，那麼咱們如今就須要304來讓瀏覽器使用本地緩存

HTTP 304

• 用戶首次請求該文件的時候，經過HTTP HEAD的Last-Modified字段將該文件的最後修改日期發送到客戶端，讓客戶端知道該文件的版本
• 瀏覽器再次請求該文件的時候，會自動將該時間做爲請求的HTTP HEAD的If-Modified-Since字段內容
• 服務端根據If-Modified-Since字段的內容(若是存在該字段)來判斷客戶端的文件是否已通過期，若是已通過期，則從新返回新的文件，若是沒有，則只須要返回304狀態碼，不須要返回文件內容。文件是否過時能夠從Cache-Control設置max-age值，那麼在此值內的時間裏就不會從新訪問服務器
• 對於靜態文件，例如：CSS、圖片，服務器會自動完成 Last Modified 和 If Modified Since 的比較，完成緩存或者更新
• 對於動態頁面，就是動態產生的頁面，每每沒有包含 Last Modified 信息，這樣瀏覽器、網關等都不會作緩存，也就是在每次請求的時候都完成一個 200 的請求。所以，對於動態頁面作緩存加速，首先要在 Response 的 HTTP Header 中增長 Last Modified 定義，其次根據 Request 中的 If Modified Since 和被請求內容的更新時間來返回 200 或者 304 。雖然在返回 304 的時候已經作了一次數據庫查詢，可是能夠避免接下來更多的數據庫查詢，而且沒有返回頁面內容而只是一個 HTTP Header，從而大大的下降帶寬的消耗，對於用戶的感受也是提升。

若是想清除緩存文件，能夠按CTRL-F5 (有時稱之爲「強刷-hard refresh」),這時候會發現瀏覽器省略了If-Modified-Since和If-None-Match請求頭,也就是無條件的請求頁面中的每一個資源.

若是服務器資源更新了，前端還在使用緩存文件，若是想讓頁面更新緩存文件怎麼辦？不可能讓用戶本身去清除本身的緩存吧？

下面咱們來講一種緩存更新的文件

三、版本號更新資源文件

<link href="./static/css/main.css?v=1.0.0" rel="stylesheet">
或
<link href="./static/css/main.css?time=1245639" rel="stylesheet">複製代碼

若是咱們更新了main.css文件,那麼只須要更改v=後面的版本號便可從新加載main.css資源文件，其實也能夠用hash值來表示

<link href="./static/css/main_88f0972.css" rel="stylesheet">複製代碼

還有一種狀況就是，若是我有n個文件，可是我只更新了其中一個文件，這個時候我不想其餘的文件更新的話，那麼咱們就須要作到一點，只改變我要更新的文件的版本號或者其餘的值便可更新此資源文件

四、CDN靜態資源部署

也就是說，把靜態資源文件和動態網頁分集羣部署，靜態資源會被部署到CDN節點上，網頁中引用的資源也會變成對應的部署路徑

原理：不一樣地區的用戶會訪問到離本身最近的相同網絡線路上的CDN節點，當請求達到CDN節點後，節點會判斷本身的內容緩存是否有效，若是有效，則當即響應緩存內容給用戶，從而加快響應速度。若是CDN節點的緩存失效，它會根據服務配置去咱們的內容源服務器獲取最新的資源響應給用戶，並將內容緩存下來以便響應給後續訪問的用戶。所以，一個地區內只要有一個用戶先加載資源，在CDN中創建了緩存，該地區的其餘後續用戶都能所以而受益。

不一樣地區的用戶訪問同一個域名卻能獲得不一樣CDN節點的IP地址，這要依賴於CDN服務商提供的智能域名解析服務，瀏覽器發起域名查詢時，這種智能DNS服務會根據用戶IP計算並返回離它最近的同網絡CDN節點IP，引導瀏覽器與此節點創建鏈接以獲取資源。

也有一些第三方的CDN: 前端公共庫CDN加速

五、非覆蓋式發佈資源

目前不少更新自由文件都是覆蓋式的發佈，可是覆蓋式的發佈會形成一些問題

用待發布資源覆蓋已發佈資源，不管是先上線頁面，仍是先上線靜態資源都會在部署過程當中發生頁面錯亂的問題。因此就須要非覆蓋式發佈，用文件的哈希值來對資源文件進行重命名，把哈希字符串放到資源文件發佈路徑中，這樣，內容有修改的資源就變成了一個新的文件發佈到線上，不會覆蓋已有的資源文件，這樣用戶在訪問的時候就不會出現錯亂的問題。

這種資源不少，不止css，包括js，圖片路徑，字體圖標庫等

<link href="./static/css/main_88f0972.css" rel="stylesheet">複製代碼

下面借鑑一個圖來示例一下，很容易看懂：

這種方法雖然優化了資源文件，可是它沒法經過手動來維護，須要一些工具來支持，
推薦幾個構建工具：

• FIS3
• webpack
• gulp
• Yeoman

還有其餘的就不說了，本身能夠google一下,好多的內容我也是看了不少篇的講資源優化的方案總結出來的，有不對的地方能夠請批評指出，上面有些講解我也是在作筆記的時候記錄的，來源我沒有標記，感謝那些人的精彩講解，你們共同窗習

來源：blog.csdn.net/xllily_11/a…
或者www.zhihu.com/question/20…

原文來自個人blog：codehtml