現(xiàn)在網(wǎng)上也有很多關(guān)于前端文件加載的性能優(yōu)化，我相信大部分的前端程序猿河胎，應(yīng)該都聽說過雅虎的14條優(yōu)化原則

1. 盡可能的減少 HTTP 的請求數(shù) content
2. 使用 CDN（Content Delivery Network） server
3. 添加 Expires 頭(或者 Cache-control )  server
4. Gzip 組件  server
5. 將 CSS 樣式放在頁面的上方  css
6. 將腳本移動到底部（包括內(nèi)聯(lián)的）  javascript
7. 避免使用 CSS 中的 Expressions  css
8. 將 JavaScript 和 CSS 獨立成外部文件   javascript css
9. 減少 DNS 查詢    content
10. 壓縮 JavaScript 和 CSS (包括內(nèi)聯(lián)的) javascript css
11. 避免重定向   server
12. 移除重復(fù)的腳本 javascript
13. 配置實體標(biāo)簽（ETags）   css
14. 使 AJAX 緩存

有些人通過這14個規(guī)則總結(jié)了一下:

前端資源的優(yōu)化

今個主要說一下資源部署和優(yōu)化的一些方案袭艺，也借鑒了好多人的理解和圖來說一下

1、資源的預(yù)加載（prebrowsing）

預(yù)加載是瀏覽器對將來可能被使用資源的一種暗示叨粘，一些資源可以在當(dāng)前頁面使用到猾编，一些可能在將來的某些頁面中被使用。作為開發(fā)人員升敲，我們比瀏覽器更加了解我們的應(yīng)用答倡，所以我們可以對我們的核心資源使用該技術(shù)。

我們可以使用該技術(shù)來預(yù)先告知瀏覽器某些資源可能在未來會被使用驴党。

• DNS 預(yù)解析dns-prefetch

Head頭部里面加入：
<link rel="dns-prefetch">
# 請求這個域名下的文件時就不需要等待DNS查詢了,也就是說在瀏覽器請求資源時瘪撇，DNS查詢就已經(jīng)準(zhǔn)備好了
# 該技術(shù)對使用第三方資源特別有用，比如jquery等

• 預(yù)連接 Preconnect

# 與 DNS 預(yù)解析類似，preconnect 不僅完成 DNS 預(yù)解析倔既，同時還將進(jìn)行 TCP 握手和建立傳輸層協(xié)議
<link rel="preconnect" >

現(xiàn)代瀏覽器都試著預(yù)測網(wǎng)站將來需要哪些連接恕曲，然后預(yù)先建立 socket 連接，從而消除昂貴的 DNS 查找渤涌、TCP 握手和 TLS 往返開銷佩谣。然而，瀏覽器還不夠聰明实蓬，并不能準(zhǔn)確預(yù)測每個網(wǎng)站的所有預(yù)鏈接目標(biāo)茸俭。好在，在 Firefox 39+ 和 Chrome 46+ 中我們可以使用 preconnect 告訴瀏覽器我們需要進(jìn)行哪些預(yù)連接安皱。

• 預(yù)獲取 Prefetching

# 顧名思義调鬓，提前加載資源（未用到），首先要確定這個資源一定會在未來用到酌伊，然后提前加載腾窝，放入瀏覽器緩存中
<link rel="prefetch" href="image.png">

prefetch很適用于優(yōu)化webfonts的性能，但預(yù)獲取還依賴于一些條件腺晾，某些預(yù)獲取可能會被瀏覽器忽略燕锥，例如從一個非常緩慢的網(wǎng)絡(luò)中獲取一個龐大的字體文件。并且悯蝉，F(xiàn)irefox 只會在瀏覽器閑置時進(jìn)行資源預(yù)獲取归形。

• 優(yōu)先級Subresource

這個也是預(yù)獲取方式，只是不同的是鼻由，指定的預(yù)獲取資源具有最高的優(yōu)先級暇榴，在所有 prefetch 項之前進(jìn)行

<link rel="subresource" href="styles.css">

• 預(yù)渲染 Prerender

# Prerender 預(yù)先加載的資源文件，也就是說可以讓瀏覽器提前加載指定頁面的所有資源
<link rel="prerender" >

• 未來 Preload

# Preload 建議允許始終預(yù)加載某些資源蕉世，不像prefetch有可能被瀏覽器忽略蔼紧，瀏覽器必須請求preload標(biāo)記的資源
<link rel="preload" >
# 存在兼容性

以上是預(yù)加載的基本解釋，詳細(xì)查看詳解文章

2狠轻、利用304本地緩存資源文件

我們大家都知道奸例，正常的網(wǎng)絡(luò)請求的返回狀態(tài)是200，如果我們每次訪問頁面之后向楼，都要去加載查吊，這樣就會浪費(fèi)帶寬，影響頁面的性能湖蜕，那么我們現(xiàn)在就需要304來讓瀏覽器使用本地緩存

HTTP 304

• 用戶首次請求該文件的時候逻卖，通過HTTP HEAD的Last-Modified字段將該文件的最后修改日期發(fā)送到客戶端，讓客戶端知道該文件的版本

• 瀏覽器再次請求該文件的時候昭抒，會自動將該時間作為請求的HTTP HEAD的If-Modified-Since字段內(nèi)容
• 服務(wù)端根據(jù)If-Modified-Since字段的內(nèi)容(如果存在該字段)來判斷客戶端的文件是否已經(jīng)過期评也，如果已經(jīng)過期炼杖，則重新返回新的文件，如果沒有盗迟，則只需要返回304狀態(tài)碼坤邪，不需要返回文件內(nèi)容。文件是否過期可以從Cache-Control設(shè)置max-age值诈乒，那么在此值內(nèi)的時間里就不會重新訪問服務(wù)器
• 對于靜態(tài)文件罩扇，例如：CSS婆芦、圖片怕磨，服務(wù)器會自動完成 Last Modified 和 If Modified Since 的比較，完成緩存或者更新
• 對于動態(tài)頁面消约，就是動態(tài)產(chǎn)生的頁面肠鲫，往往沒有包含 Last Modified 信息，這樣瀏覽器或粮、網(wǎng)關(guān)等都不會做緩存导饲，也就是在每次請求的時候都完成一個 200 的請求。因此氯材，對于動態(tài)頁面做緩存加速渣锦，首先要在 Response 的 HTTP Header 中增加 Last Modified 定義，其次根據(jù) Request 中的 If Modified Since 和被請求內(nèi)容的更新時間來返回 200 或者 304 氢哮。雖然在返回 304 的時候已經(jīng)做了一次數(shù)據(jù)庫查詢袋毙，但是可以避免接下來更多的數(shù)據(jù)庫查詢，并且沒有返回頁面內(nèi)容而只是一個 HTTP Header冗尤，從而大大的降低帶寬的消耗听盖，對于用戶的感覺也是提高。

如果想清除緩存文件裂七，可以按CTRL-F5 (有時稱之為“強(qiáng)刷-hard refresh”),這時候會發(fā)現(xiàn)瀏覽器省略了If-Modified-Since和If-None-Match請求頭,也就是無條件的請求頁面中的每個資源.

如果服務(wù)器資源更新了皆看，前端還在使用緩存文件，如果想讓頁面更新緩存文件怎么辦背零？不可能讓用戶自己去清除自己的緩存吧腰吟？

下面我們來說一種緩存更新的文件

3、版本號更新資源文件

<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個文件，但是我只更新了其中一個文件倍啥，這個時候我不想其他的文件更新的話禾乘，那么我們就需要做到一點，只改變我要更新的文件的版本號或者其他的值即可更新此資源文件

4虽缕、CDN靜態(tài)資源部署

也就是說始藕，把靜態(tài)資源文件和動態(tài)網(wǎng)頁分集群部署蒲稳，靜態(tài)資源會被部署到CDN節(jié)點上，網(wǎng)頁中引用的資源也會變成對應(yīng)的部署路徑

原理：不同地區(qū)的用戶會訪問到離自己最近的相同網(wǎng)絡(luò)線路上的CDN節(jié)點伍派，當(dāng)請求達(dá)到CDN節(jié)點后江耀，節(jié)點會判斷自己的內(nèi)容緩存是否有效，如果有效诉植，則立即響應(yīng)緩存內(nèi)容給用戶祥国，從而加快響應(yīng)速度。如果CDN節(jié)點的緩存失效晾腔，它會根據(jù)服務(wù)配置去我們的內(nèi)容源服務(wù)器獲取最新的資源響應(yīng)給用戶舌稀，并將內(nèi)容緩存下來以便響應(yīng)給后續(xù)訪問的用戶。因此灼擂，一個地區(qū)內(nèi)只要有一個用戶先加載資源壁查，在CDN中建立了緩存，該地區(qū)的其他后續(xù)用戶都能因此而受益剔应。

不同地區(qū)的用戶訪問同一個域名卻能得到不同CDN節(jié)點的IP地址睡腿，這要依賴于CDN服務(wù)商提供的智能域名解析服務(wù)，瀏覽器發(fā)起域名查詢時峻贮，這種智能DNS服務(wù)會根據(jù)用戶IP計算并返回離它最近的同網(wǎng)絡(luò)CDN節(jié)點IP席怪，引導(dǎo)瀏覽器與此節(jié)點建立連接以獲取資源。

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

5纤控、非覆蓋式發(fā)布資源

目前很多更新自由文件都是覆蓋式的發(fā)布挂捻，但是覆蓋式的發(fā)布會造成一些問題

用待發(fā)布資源覆蓋已發(fā)布資源，無論是先上線頁面嚼黔，還是先上線靜態(tài)資源都會在部署過程中發(fā)生頁面錯亂的問題细层。所以就需要非覆蓋式發(fā)布，用文件的哈希值來對資源文件進(jìn)行重命名唬涧，把哈希字符串放到資源文件發(fā)布路徑中疫赎，這樣，內(nèi)容有修改的資源就變成了一個新的文件發(fā)布到線上碎节，不會覆蓋已有的資源文件捧搞，這樣用戶在訪問的時候就不會出現(xiàn)錯亂的問題。

這種資源很多狮荔，不止css胎撇，包括js，圖片路徑殖氏，字體圖標(biāo)庫等

<link href="./static/css/main_88f0972.css" rel="stylesheet">

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

這種方法雖然優(yōu)化了資源文件，但是它無法通過手動來維護(hù)雅采，需要一些工具來支持爵憎，
推薦幾個構(gòu)建工具：

• FIS3
• webpack
• gulp
• Yeoman

還有其他的就不說了慨亲，自己可以google一下,好多的內(nèi)容我也是看了很多篇的講資源優(yōu)化的方案總結(jié)出來的，有不對的地方可以請批評指出
原文來自：codehtml