1.第一步url解析
-
地址解析(http默認(rèn)端口號(hào):80,https默認(rèn)端口號(hào):443显蝌，F(xiàn)TP默認(rèn)端口號(hào):21末购，一個(gè)服務(wù)器可以存放多個(gè)項(xiàng)目破喻，服務(wù)器根據(jù)端口號(hào)查找對(duì)應(yīng)的項(xiàng)目服務(wù).返回給客戶端)
image.png - url編碼(防止中文、或者地址出現(xiàn)亂碼盟榴，可以進(jìn)行字符編碼曹质，服務(wù)器解碼).
//對(duì)整個(gè)URL編碼：處理空格,中文字符可以,參數(shù)為url無(wú)效
encodeURL/decodeURL
//對(duì)傳遞的參數(shù)信息來編碼，空格特殊字符都可以轉(zhuǎn)碼
encodeURLComponent/decodeURLComponent
- URI/URL/URN的區(qū)別
2.第二步瀏覽器查找當(dāng)前url是否存在緩存擎场，并比較緩存是否過期羽德。緩存檢查
1.兩種情況
1-1.沒有設(shè)置緩存，本地也沒有緩存迅办，需要向服務(wù)器進(jìn)行請(qǐng)求.
1-2.本地設(shè)置緩存宅静，去查看緩存是否過期，沒有過期站欺，向本地緩存讀取.
*緩存有兩種：強(qiáng)緩存姨夹、協(xié)商緩存.
先檢查是否存在強(qiáng)緩存
有，且未失效矾策，走強(qiáng)緩存.
如果沒有磷账，或者失效，檢查是否存在協(xié)商緩存.
如果協(xié)商緩存有贾虽，直接拿協(xié)商緩存的數(shù)據(jù)
如果協(xié)商緩存沒有逃糟，直接正常請(qǐng)求向服務(wù)器請(qǐng)求最新數(shù)據(jù).
緩存位置（緩存是后臺(tái)配置，瀏覽器幫助實(shí)現(xiàn)，前端不需要寫代碼）
1.Memary Cache :內(nèi)存緩存.相當(dāng)于內(nèi)存條(緩存的存放位置)特點(diǎn)：瀏覽器關(guān)閉緩存清除.
2.Disk Cache:硬盤緩存.特點(diǎn)瀏覽器關(guān)閉绰咽，再打開依然可以讀取到緩存.
打開網(wǎng)頁(yè)：查找硬盤緩存是否有匹配菇肃，如果有則使用，沒有則發(fā)送網(wǎng)絡(luò)請(qǐng)求,
普通刷新:因tab沒有關(guān)閉取募，此時(shí)內(nèi)存緩存是可用的琐谤，會(huì)被優(yōu)先使用。如果沒有才是硬盤緩存.
強(qiáng)制刷新:瀏覽器不使用緩存哪怕本地有緩存也不管矛辕，因此發(fā)送的請(qǐng)求頭部均帶有Cache-control:no-cache,服務(wù)器直接返回200和最新內(nèi)容.
頁(yè)面第一次打開->內(nèi)存緩存（Memary-Cache）->頁(yè)面關(guān)閉->強(qiáng)制給硬盤緩存存放一份->頁(yè)面再次打開->會(huì)從硬盤緩存(Disk-Cache)直接讀取內(nèi)容返回?zé)o需請(qǐng)求.
1.強(qiáng)緩存(html頁(yè)面一般不做強(qiáng)緩存笑跛，返回的狀態(tài)碼:200(from memory cache))
- http1.0用expires用來設(shè)定緩存過期時(shí)間付魔，用來指定資源到期時(shí)間.
- http1.1用的是Cache-Control（max-age=2592000,第一次拿到資源后的30天內(nèi)聊品，再次發(fā)送請(qǐng)求，讀取緩存中的信息.）
- 兩者同時(shí)存在的話 Cache-Control優(yōu)先級(jí)大于expries
強(qiáng)緩存原理:
- 強(qiáng)緩存的問題
如果服務(wù)器文件更新了几苍，但是本地還是有強(qiáng)緩存翻屈，拿不到最新的信息.
解決方案:
1.html頁(yè)面一般不做強(qiáng)緩存.
2.webpack的hash值.服務(wù)器更新資源后讓資源名稱和之前不一樣.這樣頁(yè)面導(dǎo)入全新資源.
舊:index.xxxxx.js（緩存）
新:index.cdcdc.js （未緩存從服務(wù)器讀取最新的.）
3.當(dāng)文件更新后，在html導(dǎo)入的時(shí)候妻坝，設(shè)置一個(gè)后綴名伸眶，后綴可以設(shè)置一個(gè)時(shí)間戳.
<script :src="xxxx.js?時(shí)間戳">
4.協(xié)商緩存也可以解決.
2.協(xié)商緩存（強(qiáng)緩存沒有，或者失效后刽宪，不管你有沒有緩存厘贼，瀏覽器都會(huì)攜帶緩存標(biāo)識(shí)，向服務(wù)器端發(fā)送請(qǐng)求）圣拄。
- http1.0 Last-Modified(記錄當(dāng)前資源最后更新時(shí)間)
- http1.1 ETag(記錄標(biāo)識(shí))
- Last-Nodified/ETag協(xié)商緩存就是在強(qiáng)緩存失效后嘴秸，瀏覽器攜帶緩存標(biāo)識(shí)，由服務(wù)器根據(jù)緩存標(biāo)識(shí)決定使用緩存的過程.
沒更新返回:304,通知客戶端讀取緩存信息庇谆，
更新過返回：200和最新資源岳掐，已經(jīng)Last-Modified/ETag
強(qiáng)緩存與協(xié)商緩存區(qū)別
協(xié)商緩存總是發(fā)起請(qǐng)求與服務(wù)器溝通.不管有沒有緩存.
強(qiáng)緩存性能比協(xié)商緩存性能好很多.
兩種只針對(duì)于靜態(tài)資源文件，而且不是經(jīng)常更新的.
3.數(shù)據(jù)緩存饭耳，需要localStorage串述、vuex或者redux
3.DNS解析URL對(duì)應(yīng)的IP(將服務(wù)器地址，轉(zhuǎn)換成外網(wǎng)地址)域名解析 域名 外網(wǎng)IP
通過域名->找到外網(wǎng)IP->找到服務(wù)器地址.
DNS也是有緩存的,如果之前解析過會(huì)在本地有緩存(不一定,也是有周期的).
- 遞歸查找（本地查詢）
- 迭代查找 （依次遍歷每臺(tái)服務(wù)器）
DNS優(yōu)化：
1.減少DNS請(qǐng)求（一個(gè)頁(yè)面少用不同的域名寞肖，資源盡量都放在相同的服務(wù)器上纲酗，項(xiàng)目中不會(huì)這么干，項(xiàng)目中會(huì)將不同的資源分布在不同的服務(wù)器上）控制臺(tái)查看Source查看不同的域名.不同的資源服務(wù)器新蟆，要求不一樣觅赊，一般公司用的是服務(wù)器分布式.同一個(gè)源http可以同時(shí)發(fā)送4-7個(gè)請(qǐng)求，可以提高并發(fā)性.
2.DNA預(yù)獲取
//還沒有加載DOM提前發(fā)送請(qǐng)求
<link rel="dns-prefetch herf="xxxx">
4.根據(jù)IP建立TCP連接(三次握手)
1.建立連接通道
5.HTTP發(fā)起請(qǐng)求（傳輸數(shù)據(jù)）
6.服務(wù)器處理請(qǐng)求栅葡，瀏覽器接收HTTP響應(yīng)
7.渲染頁(yè)面茉兰，構(gòu)建DOM樹.
8.關(guān)閉TCP連接(四次揮手)
9.產(chǎn)品性能優(yōu)化方案
- http網(wǎng)絡(luò)層優(yōu)化
- 代碼編譯層優(yōu)化webpack
- 代碼運(yùn)行層優(yōu)化 html/css+javascript+vue/react(虛擬DOM)
- 安全優(yōu)化xss+csrf
- 數(shù)據(jù)埋點(diǎn)及性能監(jiān)控
10.CRP(關(guān)鍵渲染路徑)
11.TCP/IP
- TCP建立客戶端與服務(wù)器端的傳輸通道（相當(dāng)于快遞傳送的路）
- IP主機(jī)地址，根據(jù)IP找到主機(jī)地址.
- HTTP傳輸協(xié)議（相當(dāng)于快遞員欣簇，http/https加密協(xié)議规脸，需要證書/ftp傳輸大文件）
