首先要搞清楚用戶訪問網(wǎng)站時(shí)，經(jīng)歷了哪些步驟，我們才好從每一步中尋找可以優(yōu)化的地方。
步驟 及 優(yōu)化方法
- 查看緩存
當(dāng)訪問某個(gè)頁面時(shí)，瀏覽器會先檢查本地有沒有緩存。
方法：如果有緩存，就使用本地緩存的頁面；如果沒有緩存，在訪問服務(wù)器。
- DNS 查詢
瀏覽器訪問某網(wǎng)站的服務(wù)器，要先進(jìn)行 DNS 查詢。也就是，拿到地址欄中的地址，去 DNS 服務(wù)器查詢相應(yīng)的 數(shù)字IP 地址，然后使用 數(shù)字IP 地址去訪問該網(wǎng)站的服務(wù)器。
方法：減少 DNS 查詢，即，盡量減少域名。
舉例來說，如果 a.css 放在 A 網(wǎng)站，b.css 放在 B 網(wǎng)站，那么就要進(jìn)行兩次 DNS 查詢；我們可以把 a.css 和 b.css 放在同一個(gè)網(wǎng)站，這樣就只要進(jìn)行一次 DNS 查詢。
- 建立 TCP 連接
方法：TCP 連接連接復(fù)用。
即，在 HTTP 協(xié)議中加上一個(gè)請求頭 keep-alive，服務(wù)器就會保持連接，當(dāng)?shù)诙握埱髸r(shí)，就復(fù)用之前的那個(gè)連接。
另外，如果使用的是 HTTP/2.0 版本，連接復(fù)用率是更高的（多路復(fù)用）。
- 發(fā)送 HTTP 請求
HTTP 請求有 4 部分：
第一部分：請求行，不能優(yōu)化。
第二部分：請求頭。方法1：不要濫用 Cookie；減少 Cookie 體積。
第三部分：回車。
第四部分：請求的內(nèi)容。方法2：在請求頭中設(shè)置 Cache-Control，讓瀏覽器使用本地的緩存文件。
方法3：合并CSS和JS文件，減少請求數(shù)。
方法4：增加域名同時(shí)請求多個(gè)文件。
同一域名可以同時(shí)請求多個(gè) CSS 和 JS。但是不同的瀏覽器存在著差別：IE 瀏覽器最多只能同時(shí)請求 4 個(gè)文件，Chrome 瀏覽器最多可以同時(shí)請求 8 個(gè)文件。
由于 IE 只能從同一域名同時(shí)請求 4 個(gè)文件，所以我們可以將文件放在不同域名，那么 IE 就可以從不同域名，同時(shí)請求超過 4 個(gè)文件，那么請求速度不就加快了嗎。
但是這與上面第 2 步?jīng)_突了。第 2 步提到，要減少域名，這里又說把文件放到不同的域名，那就要增加域名。
那么這里，我們就要做個(gè)“權(quán)衡”，具體情況具體分析：
如果文件多，可以放到不同域名，以此減少瀏覽器請求的時(shí)間（多域名）；
如果文件少，就可以放到一個(gè)域名，以此減少 DNS 查詢時(shí)間（少域名）。
- 接收響應(yīng)
方法1：使用 ETag。
ETag 可以做到，當(dāng)服務(wù)器發(fā)現(xiàn)你請求的文件是最新的(通過MD5值比對)，就不給你再發(fā)送文件，而是發(fā)送 304，讓你使用上次發(fā)送過的文件。
方法2：使用 Gzip。
服務(wù)器將 html、css、js 等文件壓縮，瀏覽器接收壓縮后的文件。
當(dāng)然如果文件小，就不用 Gzip。
因?yàn)闉g覽器在進(jìn)行解壓時(shí)，也會耗費(fèi)時(shí)間。
- 接收完成，解析 HTML
解析 HTML 的時(shí)候，有以下步驟：
查看 DOCTYPE，根據(jù) DOCTYPE 選擇使用 html 或者 xml 等
方法1：DOCTYPE 標(biāo)簽不能寫錯(cuò)，也不能不寫。
因?yàn)檫@樣會導(dǎo)致瀏覽器解析 HTML時(shí)間變才, 甚至解析出錯(cuò)。
然后開始逐行解析
方法2：不要寫太多無用的標(biāo)簽。
看到標(biāo)簽，瀏覽器會干嘛呢？Chrome 瀏覽器不會立即渲染該標(biāo)簽，它會等所有 CSS 加載完了，再渲染該標(biāo)簽。
方法3：把 CSS文件 放到 head 標(biāo)簽，這樣可以盡早渲染頁面。
- 下載解析CSS 和 JS
當(dāng)瀏覽器碰到 CSS 和 JS 時(shí)，就會下載 CSS 或 JS，然后解析。
下載是并行的，而解析是串行的。
方法1：把 CSS文件 和 JS 文件放到 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）。
文件放到 CDN的好處:
- 增大同時(shí)下載的數(shù)量。
- 如果客戶端與服務(wù)器距離較遠(yuǎn)，放到 CDN可以減少通信過程中的時(shí)間損耗。
- 訪問CDN不需要Cookie，從而減少了Cookie體積。
方法2：JS文件 放到 body 標(biāo)簽最后。
這樣可以盡早顯示頁面，因?yàn)榻馕?JS 會阻塞頁面渲染，同時(shí)還可以讓 JS 獲取到所以DOM節(jié)點(diǎn)。
其他優(yōu)化方法
延遲加載（懶加載）
先下載第一屏內(nèi)容，后面內(nèi)容根據(jù)用戶動作延遲加載。
避免空 src 的圖片，可以寫成 <img src="about:blank"/>；
避免使用 @import 引入 CSS 文件。
圖片壓縮
好的無損壓縮圖片工具
第一：Tinypng
地址：https://tinypng.com/
最大限度的做到對畫質(zhì)無損的進(jìn)行壓縮，支持對Jpg和Png的壓縮。
第二：Compressor.io
地址：https://compressor.io/compress
Compressor支持JPG，PNG，GIF，SVG多種格式的照片。
第三：Kraken.io
工具地址：https://kraken.io/web-interface
Kraken可以把Zip中的文件一次性導(dǎo)入到工具中進(jìn)行壓縮，同時(shí)它支持不同的格式同時(shí)進(jìn)行壓縮。
第四：Giftofspeed
JPG壓縮：https://www.giftofspeed.com/jpg-compressor/
Png壓縮：https://www.giftofspeed.com/png-compressor/
在Giftofspeed，你可以輸入你的網(wǎng)址，然后這個(gè)工具會建議你對圖片進(jìn)行優(yōu)化，這樣你就可以發(fā)現(xiàn)很多問題。
第五： OptimiZilla
地址：http://optimizilla.com/
這個(gè)工具可以批量上傳和批量壓縮圖片，一次可以上傳20張圖片；
同時(shí)他的壓縮程度大小可以有你自己來調(diào)節(jié)，而且是盡量的不改變畫質(zhì)。
總結(jié)優(yōu)化方法
- 減少 DNS 查詢，即，盡量減少域名。
- TCP 連接連接復(fù)用。
- 不要濫用 Cookie；減少 Cookie 體積。
- 在請求頭中設(shè)置 Cache-Control，讓瀏覽器使用本地的緩存文件。
- 合并CSS和JS文件，減少請求數(shù)。
- 文件多時(shí)，增加域名同時(shí)請求多個(gè)文件。
- 使用 ETag。
- 使用 Gzip壓縮文件。
- DOCTYPE 標(biāo)簽不能寫錯(cuò)，也不能不寫。
- 不要寫無用的標(biāo)簽，減少標(biāo)簽數(shù)。
- 把 CSS文件 放到 head 標(biāo)簽，這樣可以盡早渲染頁面。
- JS文件 放到 body 標(biāo)簽最后。
- 把 CSS文件 和 JS 文件放到 CDN。
- 使用延遲加載（懶加載）。
- 避免空 src 的圖片，可以寫成 <img src="about:blank"/>。
- 避免使用 @import 引入 CSS 文件。
- 盡量壓縮圖片。
最后
怎么看某個(gè)網(wǎng)站有沒有優(yōu)化好呢？
控制臺 -> Audits -> Run audits 。
