1.分析
從用戶輸入 url 柄延，按下回車到網(wǎng)頁呈現(xiàn)過程中跟前端相關(guān)的過程：
- 緩存
- DNS查詢
- 建立TCP連接（無關(guān)）
- 發(fā)送HTTP請求
后臺處理 - 接收響應(yīng)
- 接收完成 -> HTML
- 解析 查看DOCTYPE html/xml
- 逐行解析
- 遇到 html 標(biāo)簽
- 遇到CSS瞬矩，會(huì)下載CSS，同時(shí)往下查看悔政，如果還有CSS文件翁涤，就會(huì)一起下載桥言，但是解析的時(shí)候不會(huì)同時(shí)解析，即下載并行迷雪，解析串行。（chrome會(huì)阻塞html渲染虫蝶，ie不會(huì)章咧，看瀏覽器）
- 遇到JS，跟CSS相同能真，下載并行赁严，解析串行。（一定會(huì)阻塞html渲染）
2.優(yōu)化對策（分治）
1. DNS查詢：
- 減少DNS查詢粉铐，盡量減少域名數(shù)疼约。
2. 建立TCP連接：
- 連接復(fù)用，在發(fā)送http的請求頭中設(shè)置Connection: keep-alive蝙泼。
- HTTP/2.0 多路復(fù)用
3. 發(fā)送請求：
- 減少cookie體積程剥，使用 CDN ，CDN沒有cookie
- 使用 cache-control
- 同時(shí)發(fā)送多個(gè)請求汤踏，瀏覽器會(huì)自己去請求织鲸，比如同時(shí)請求多個(gè)CSS舔腾，JS，但是同時(shí)發(fā)送請求數(shù)量會(huì)有限制搂擦，一個(gè)域名只能發(fā)送4個(gè)稳诚，那么要是需要發(fā)送多個(gè)，那么就需要增加域名瀑踢，如：css.cdn.com/n.css扳还，js.cdn.com/n.js。跟DNS查詢減少域名會(huì)有矛盾橱夭，這個(gè)時(shí)候需要權(quán)衡氨距，假如文件很多，那么增加域名徘钥，增加請求并發(fā)數(shù)衔蹲，減少請求時(shí)間，如果文件很少呈础，那么就不要增加域名舆驶。
- 合并文件，比如合并js而钞，合并css沙廉。
4. 接收響應(yīng)
- ETag 制造304響應(yīng)，不需要重新接收所有的請求臼节，可以使用上一次的結(jié)果撬陵。
- 使用 gzip 進(jìn)行壓縮，文件較大時(shí)使用 gzip 壓縮网缝。
5. 接收完成
- 要寫 DOCTYPE 并且不能寫錯(cuò)巨税。
6. CSS
- 增加域名，增加下載的并發(fā)數(shù)量
- 文件大的話就用 gzip 壓縮
- 放在 head 中
- 使用 CDN粉臊，增加并發(fā)數(shù)草添，解除光速的限制。
7. JS
- JS放body的最后
8. 延遲加載和預(yù)加載
**9. 避免空 src 的圖片
- 可以用 <img src="about:blank">
10. 使用事件委托扼仲，減少監(jiān)聽器
3.如何測試網(wǎng)站優(yōu)化
chrome 開發(fā)者工具远寸，Audits，可以查看屠凶。
