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