瀏覽器的一個(gè)請求從發(fā)送到返回都經(jīng)歷了什么？
- 首先用戶在瀏覽器中輸入了一個(gè)url，瀏覽器將url解析成domain
- dns服務(wù)器會(huì)根據(jù)domain去查詢相關(guān)host對應(yīng)的ip地址，并且返回給瀏覽器
- 瀏覽器將該ip地址中攜帶的協(xié)議發(fā)送到網(wǎng)絡(luò)中
- 請求到達(dá)服務(wù)端
- 服務(wù)端將response返回給瀏覽器
- 瀏覽器開始渲染頁面
在以上過程中有哪些可以優(yōu)化的點(diǎn)呢？
- 資源壓縮合并，減少HTTP請求
- 非核心代碼異步加載
- 利用瀏覽器緩存
- 使用CDN
- 預(yù)解析DNS
- 服務(wù)端渲染
1. 異步加載
- 動(dòng)態(tài)腳本加載
創(chuàng)建script標(biāo)簽，將標(biāo)簽加載到文檔中 - defer
加載script標(biāo)簽的時(shí)候，增加defer字段 - async
加載script標(biāo)簽的時(shí)候，增加async字段
1.2 異步加載的區(qū)別
- defer是在HTML解析完之后才會(huì)執(zhí)行，如果是多個(gè)，按照加載順序依次執(zhí)行，前一個(gè)文件加載執(zhí)行完畢之后，才會(huì)執(zhí)行下一個(gè)文件。
- async是在加載完之后立即執(zhí)行，如果是多個(gè)，執(zhí)行順序與加載順序無關(guān)（根據(jù)請求完成順序執(zhí)行）
2. 緩存
2. 1緩存的分類
強(qiáng)緩存：直接使用緩存文件
Expires：緩存失效的絕對時(shí)間
cache-control 相對時(shí)間，在該時(shí)間段內(nèi)會(huì)直接從瀏覽器中取緩存
如果瀏覽器兩個(gè)字段都下發(fā)了，以后者為準(zhǔn)
協(xié)商緩存：
由服務(wù)器根據(jù)請求中的相關(guān)header信息來比對結(jié)果是否協(xié)商緩存命中；若命中，則服務(wù)器返回新的響應(yīng)header信息更新緩存中的對應(yīng)header信息，但是并不返回資源內(nèi)容，它會(huì)告知瀏覽器可以直接從緩存獲??；否則返回最新的資源內(nèi)容。
即第一次請求的響應(yīng)頭帶上某個(gè)字段（Last-Modified或者Etag），則后續(xù)請求則會(huì)帶上對應(yīng)的請求字段（If-Modified-Since或者If-None-Match），若響應(yīng)頭沒有Last-Modified或者Etag字段，則請求頭也不會(huì)有對應(yīng)的字段。
Last-Modified/If-Modified-Since：二者的值都是GMT格式的時(shí)間字符串
Etag/If-None-Match：這兩個(gè)值是由服務(wù)器生成的每個(gè)資源的唯一標(biāo)識(shí)字符串，只要資源有變化就這個(gè)值就會(huì)改變；其判斷過程與Last-Modified/If-Modified-Since類似，與Last-Modified不一樣的是，當(dāng)服務(wù)器返回304 Not Modified的響應(yīng)時(shí)，由于ETag重新生成過，response header中還會(huì)把這個(gè)ETag返回，即使這個(gè)ETag跟之前的沒有變化。
