web 加載環(huán)節(jié)及個每個環(huán)節(jié)的優(yōu)化處理
1. DNS查詢
減少 DNS 查詢那槽，即減少請求的域名數(shù)量。
2. TCP協(xié)議
使用 TCP 連接復(fù)用逞泄，在請求頭處添加 keep-alive 肮蛹，使用 http 2.0 的多路復(fù)用可提高復(fù)用率愕贡。
3. 發(fā)送 http 請求
- 減少 Cookie 體積砖顷。用于 Cookie 都存在主域名下，CDN 沒 Cookie赃梧，所以利用 CDN 請求靜態(tài)資源可達到減少 Cookie 體積的目的滤蝠。
- Cache-Control 緩存，限定時間內(nèi)不發(fā)送請求授嘀，使用本地緩存的文件物咳。
- 增加并發(fā)加載數(shù)。即同時發(fā)送多個請求來提高加載速度（瀏覽器自帶）蹄皱。請求文件多時览闰，文件放在不同的域名中，同時請求巷折。一個域名默認(rèn)四個請求压鉴，多個域名提高請求數(shù)。雖然DNS 查詢時間增加锻拘，但是 http 請求時間減少了油吭。僅限需要請求的 css / js 文件數(shù)量多才使用該方法。
4. 接受響應(yīng)
- ETag 做 304 響應(yīng)署拟。請求時帶上的 md5 婉宰，服務(wù)器判斷是否需要下載新文件。md5 一樣就不下載文件推穷。
-
GZip 壓縮心包。服務(wù)器用 GZip 壓縮文件，瀏覽器得到響應(yīng)后再解壓馒铃。由于文件被壓縮過蟹腾，文件體積減小痕惋，加載速度便提升了。
5. HTML
刪除多余空格……（作用不大）
6. DOCTYPE
必須寫岭佳，并且不要寫錯血巍，避免瀏覽器多個文件格式解析，令渲染時間變長珊随。
7. 瀏覽器渲染解析
該環(huán)節(jié)基本可跳過……
8. CSS & JS
- 合并 CSS / JS 文件述寡，一般都使用 webpack 等工具。
- 文件多時叶洞，可使用 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）鲫凶。
兩個作用：1.多域名，達到并發(fā)加載數(shù)效果衩辟；2.使用戶就近獲取所需內(nèi)容螟炫，降低網(wǎng)絡(luò)擁塞，提高用戶訪問響應(yīng)速度和命中率艺晴。 - CSS 放在 head 昼钻，JS 放在 body 最后。CSS 是視覺效果封寞，越早渲染越好然评，JS 是交互效果，可放緩加載狈究。
9. 延遲加載文件 和 預(yù)加載文件
- 先加載第一屏的內(nèi)容文件碗淌，當(dāng)用戶滾動頁面時，再加載隨后的頁面內(nèi)容抖锥。
- 第一屏內(nèi)容加載后亿眠，用戶還未滾動頁面便預(yù)先加載隨后內(nèi)容。
10. loading 動畫
利用視覺效果減緩用戶的不耐煩磅废。
