引子
互聯網有一項著名的8秒原則混萝。用戶在訪問Web網頁時遗遵，如果時間超過8秒就會感到不耐煩，如果加載需要太長時間逸嘀，他們就會放棄訪問车要。大部分用戶希望網頁能在2秒之內就完成加載。事實上崭倘，加載時間每多1秒翼岁，你就會流失7%的用戶类垫。8秒并不是準確的8秒鐘，只是向網站開發(fā)者表明了加載時間的重要性琅坡。那我們如何優(yōu)化頁面性能悉患，提高頁面加載速度呢？這是本文主要要探討的問題榆俺，然而性能優(yōu)化是個綜合性問題售躁，沒有標準答案，想要面面俱到羅列出來茴晋，并非易事陪捷。本文只關注一些核心要點，以下是我總結性能優(yōu)化常見的辦法：
一晃跺、資源壓縮與合并
主要包括這些方面：html壓縮揩局、css 壓縮、js的壓縮和混亂和文件合并掀虎。
資源壓縮可以從文件中去掉多余的字符凌盯，比如回車、空格烹玉。你在編輯器中寫代碼的時候驰怎，會使用縮進和注釋，這些方法無疑會讓你的代碼簡潔而且易讀二打，但它們也會在文檔中添加多余的字節(jié)县忌。
1.html壓縮
html代碼壓縮就是壓縮這些在文本文件中有意義，但是在HTML中不顯示的字符继效，包括空格症杏，制表符，換行符等瑞信，還有一些其他意義的字符厉颤，如HTML注釋也可以被壓縮。
如何進行html壓縮：
使用在線網站進行壓縮(開發(fā)過程中一般不用)
nodejs 提供了html-minifier工具
后端模板引擎渲染壓縮
2.css代碼壓縮：
css代碼壓縮簡單來說就是無效代碼刪除和css語義合并
如何進行css壓縮：
使用在線網站進行壓縮(開發(fā)過程中一般不用)
使用html-minifier工具
使用clean-css對css壓縮
3.js的壓縮和混亂
js的壓縮和混亂主要包括以下這幾部分：
無效字符的刪除
剔除注釋
代碼語義的縮減和優(yōu)化
代碼保護(代碼邏輯變得混亂凡简，降低代碼的可讀性逼友，這點很重要)
如何進行js的壓縮和混亂
使用在線網站進行壓縮(開發(fā)過程中一般不用)
使用html-minifier工具
使用uglifyjs2對js進行壓縮
順便給大家推薦一個裙，它的前面是 537秤涩，中間是631帜乞，最后就是 707。想要學習前端的小伙伴可以加入我們一起學習筐眷，互相幫助黎烈。群里每天晚上都有大神免費直播上課，如果不是想學習的小伙伴就不要加啦。
其實css壓縮與js的壓縮和混亂比html壓縮收益要大得多怨喘，同時css代碼和js代碼比html代碼多得多津畸，通過css壓縮和js壓縮帶來流量的減少振定，會非常明顯必怜。所以對大公司來說，html壓縮可有可無后频，但css壓縮與js的壓縮和混亂必須要有梳庆！
4.文件合并
從上圖可以看出不合并請求有以下缺點：
文件與文件之間有插入的上行請求，增加了N-1個網絡延遲
受丟包問題影響更嚴重
keep-alive方式可能會出現狀況卑惜，經過代理服務器時可能會被斷開膏执，也就是說不能一直保持keep-alive的狀態(tài)
壓縮合并css和js可以減少網站http請求的次數，但合并文件可能會帶來問題:首屏渲染和緩存失效問題露久。那該如何處理這問題呢更米？—-公共庫合并和不同頁面的合并。
如何進行文件合并
使用在線網站進行文件合并
使用nodejs實現文件合并(gulp毫痕、fis3)
二征峦、非核心代碼異步加載異步加載的方式
1、異步加載的方式
異步加載的三種方式——async和defer消请、動態(tài)腳本創(chuàng)建
① async方式
async屬性是HTML5新增屬性栏笆，需要Chrome、FireFox臊泰、IE9+瀏覽器支持
async屬性規(guī)定一旦腳本可用蛉加，則會異步執(zhí)行
async屬性僅適用于外部腳本
如果是多個腳本，該方法不能保證腳本按順序執(zhí)行
② defer方式
兼容所有瀏覽器
defer屬性規(guī)定是否對腳本執(zhí)行進行延遲缸逃，直到頁面加載為止
如果是多個腳本针饥，該方法可以確保所有設置了defer屬性的腳本按順序執(zhí)行
如果腳本不會改變文檔的內容，可將defer屬性加入到script標簽中需频，以便加快處理文檔的速度
③動態(tài)創(chuàng)建script標簽
在還沒定義defer和async前丁眼，異步加載的方式是動態(tài)創(chuàng)建script，通過window.onload方法確保頁面加載完畢再將script標簽插入到DOM中,具體代碼如下：
function?addScriptTag(src){??
????var?script?=?document.createElement('script');??
????script.setAttribute("type","text/javascript");??
????script.src?=?src;??
????document.body.appendChild(script);??
}??
window.onload?=?function(){??
????addScriptTag("js/index.js");??
}??
2贺辰、異步加載的區(qū)別
1)defer是在HTML解析完之后才會執(zhí)行户盯，如果是多個，按照加載的順序依次執(zhí)行
2)async是在加載完之后立即執(zhí)行饲化，如果是多個莽鸭，執(zhí)行順序和加載順序無關
async和defer
其中藍色線代表網絡讀取，紅色線代表執(zhí)行時間吃靠，這倆都是針對腳本的硫眨；綠色線代表 HTML 解析。
三巢块、利用瀏覽器緩存
對于web應用來說礁阁，緩存是提升頁面性能同時減少服務器壓力的利器巧号。
瀏覽器緩存類型
1.強緩存：不會向服務器發(fā)送請求，直接從緩存中讀取資源姥闭，在chrome控制臺的network選項中可以看到該請求返回200的狀態(tài)碼丹鸿，并且size顯示from disk cache或from memory cache；
相關的header:
Expires ：response header里的過期時間棚品，瀏覽器再次加載資源時靠欢，如果在這個過期時間內，則命中強緩存铜跑。它的值為一個絕對時間的GMT格式的時間字符串门怪， 比如Expires:Thu,21 Jan 2018 23:39:02 GMT
Cache-Control ：這是一個相對時間，在配置緩存的時候锅纺，以秒為單位掷空，用數值表示。當值設為max-age=300時囤锉，則代表在這個請求正確返回時間（瀏覽器也會記錄下來）的5分鐘內再次加載資源坦弟，就會命中強緩存。比如Cache-Control:max-age=300嚼锄，
簡單概括：其實這兩者差別不大减拭，區(qū)別就在于 Expires 是http1.0的產物，Cache-Control是http1.1的產物区丑，兩者同時存在的話拧粪，Cache-Control優(yōu)先級高于Expires；在某些不支持HTTP1.1的環(huán)境下沧侥，Expires就會發(fā)揮用處可霎。所以Expires其實是過時的產物，現階段它的存在只是一種兼容性的寫法宴杀。強緩存判斷是否緩存的依據來自于是否超出某個時間或者某個時間段癣朗，而不關心服務器端文件是否已經更新，這可能會導致加載文件不是服務器端最新的內容旺罢，那我們如何獲知服務器端內容較客戶端是否已經發(fā)生了更新呢旷余？此時我們需要協商緩存策略。
2.協商緩存：向服務器發(fā)送請求扁达，服務器會根據這個請求的request header的一些參數來判斷是否命中協商緩存正卧，如果命中，則返回304狀態(tài)碼并帶上新的response header通知瀏覽器從緩存中讀取資源跪解；另外協商緩存需要與cache-control共同使用炉旷。
順便給大家推薦一個裙，它的前面是 537，中間是631窘行，最后就是 707饥追。想要學習前端的小伙伴可以加入我們一起學習，互相幫助罐盔。群里每天晚上都有大神免費直播上課但绕，如果不是想學習的小伙伴就不要加啦。
相關的header:
①Last-Modified和If-Modified-Since：當第一次請求資源時翘骂，服務器將資源傳遞給客戶端時壁熄，會將資源最后更改的時間以“Last-Modified: GMT”的形式加在實體首部上一起返回給客戶端。
Last-Modified: Fri, 22 Jul 2016 01:47:00 GMT
客戶端會為資源標記上該信息碳竟，下次再次請求時，會把該信息附帶在請求報文中一并帶給服務器去做檢查狸臣，若傳遞的時間值與服務器上該資源最終修改時間是一致的莹桅，則說明該資源沒有被修改過，直接返回304狀態(tài)碼烛亦，內容為空诈泼，這樣就節(jié)省了傳輸數據量 。如果兩個時間不一致煤禽，則服務器會發(fā)回該資源并返回200狀態(tài)碼铐达，和第一次請求時類似。這樣保證不向客戶端重復發(fā)出資源檬果，也保證當服務器有變化時瓮孙，客戶端能夠得到最新的資源。一個304響應比一個靜態(tài)資源通常小得多选脊，這樣就節(jié)省了網絡帶寬杭抠。
但last-modified 存在一些缺點：
Ⅰ.某些服務端不能獲取精確的修改時間
Ⅱ.文件修改時間改了，但文件內容卻沒有變
既然根據文件修改時間來決定是否緩存尚有不足恳啥，能否可以直接根據文件內容是否修改來決定緩存策略偏灿？—-ETag和If-None-Match
②ETag和If-None-Match：Etag是上一次加載資源時，服務器返回的response header钝的，是對該資源的一種唯一標識翁垂，只要資源有變化，Etag就會重新生成硝桩。瀏覽器在下一次加載資源向服務器發(fā)送請求時沿猜，會將上一次返回的Etag值放到request header里的If-None-Match里，服務器只需要比較客戶端傳來的If-None-Match跟自己服務器上該資源的ETag是否一致亿柑，就能很好地判斷資源相對客戶端而言是否被修改過了邢疙。如果服務器發(fā)現ETag匹配不上，那么直接以常規(guī)GET 200回包形式將新的資源（當然也包括了新的ETag）發(fā)給客戶端；如果ETag是一致的疟游，則直接返回304知會客戶端直接使用本地緩存即可呼畸。
兩者之間對比：
首先在精確度上，Etag要優(yōu)于Last-Modified颁虐。Last-Modified的時間單位是秒蛮原，如果某個文件在1秒內改變了多次，那么他們的Last-Modified其實并沒有體現出來修改另绩，但是Etag每次都會改變確保了精度儒陨；如果是負載均衡的服務器，各個服務器生成的Last-Modified也有可能不一致笋籽。
第二在性能上蹦漠，Etag要遜于Last-Modified，畢竟Last-Modified只需要記錄時間车海，而Etag需要服務器通過算法來計算出一個hash值笛园。
第三在優(yōu)先級上，服務器校驗優(yōu)先考慮Etag
緩存的機制
強制緩存優(yōu)先于協商緩存進行侍芝，若強制緩存(Expires和Cache-Control)生效則直接使用緩存研铆，若不生效則進行協商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協商緩存由服務器決定是否使用緩存州叠，若協商緩存失效棵红，那么代表該請求的緩存失效，重新獲取請求結果咧栗，再存入瀏覽器緩存中逆甜；生效則返回304，繼續(xù)使用緩存楼熄。主要過程如下：
用戶行為對瀏覽器緩存的影響
1.地址欄訪問忆绰，鏈接跳轉是正常用戶行為，將會觸發(fā)瀏覽器緩存機制可岂；
2.F5刷新错敢，瀏覽器會設置max-age=0，跳過強緩存判斷缕粹，會進行協商緩存判斷稚茅；
3.ctrl+F5刷新，跳過強緩存和協商緩存平斩，直接從服務器拉取資源亚享。
如果想了解更多緩存機制，請猛戳 深入理解瀏覽器的緩存機制
四绘面、使用CDN
大型Web應用對速度的追求并沒有止步于僅僅利用瀏覽器緩存欺税，因為瀏覽器緩存始終只是為了提升二次訪問的速度侈沪，對于首次訪問的加速，我們需要從網絡層面進行優(yōu)化晚凿，最常見的手段就是CDN（Content Delivery Network亭罪，內容分發(fā)網絡）加速。通過將靜態(tài)資源(例如javascript歼秽，css应役，圖片等等）緩存到離用戶很近的相同網絡運營商的CDN節(jié)點上，不但能提升用戶的訪問速度燥筷，還能節(jié)省服務器的帶寬消耗箩祥，降低負載。
CDN是怎么做到加速的呢肆氓？
其實這是CDN服務商在全國各個省份部署計算節(jié)點袍祖，CDN加速將網站的內容緩存在網絡邊緣,不同地區(qū)的用戶就會訪問到離自己最近的相同網絡線路上的CDN節(jié)點，當請求達到CDN節(jié)點后做院，節(jié)點會判斷自己的內容緩存是否有效盲泛，如果有效，則立即響應緩存內容給用戶键耕，從而加快響應速度。如果CDN節(jié)點的緩存失效柑营，它會根據服務配置去我們的內容源服務器獲取最新的資源響應給用戶屈雄，并將內容緩存下來以便響應給后續(xù)訪問的用戶。因此官套，一個地區(qū)內只要有一個用戶先加載資源酒奶，在CDN中建立了緩存，該地區(qū)的其他后續(xù)用戶都能因此而受益奶赔。
五惋嚎、預解析DNS
資源預加載是另一個性能優(yōu)化技術，我們可以使用該技術來預先告知瀏覽器某些資源可能在將來會被使用到站刑。
通過 DNS 預解析來告訴瀏覽器未來我們可能從某個特定的 URL 獲取資源另伍，當瀏覽器真正使用到該域中的某個資源時就可以盡快地完成 DNS 解析。例如绞旅，我們將來可從 example.com 獲取圖片或音頻資源摆尝，那么可以在文檔頂部的 <head> 標簽中加入以下內容：
<link rel="dns-prefetch" >
當我們從該 URL 請求一個資源時，就不再需要等待 DNS 的解析過程因悲。該技術對使用第三方資源特別有用堕汞。通過簡單的一行代碼就可以告知那些兼容的瀏覽器進行 DNS 預解析，這意味著當瀏覽器真正請求該域中的某個資源時晃琳，DNS 的解析就已經完成了,從而節(jié)省了寶貴的時間讯检。
另外需要注意的是琐鲁，瀏覽器會對a標簽的href自動啟用DNS Prefetching，所以a標簽里包含的域名不需要在head中手動設置link人灼。但是在HTTPS下不起作用围段，需要meta來強制開啟功能。這個限制的原因是防止竊聽者根據DNS Prefetching推斷顯示在HTTPS頁面中超鏈接的主機名挡毅。下面這句話作用是強制打開a標簽域名解析
<meta http-equiv="x-dns-prefetch-control" content="on"/>
作者：浪里行舟
