>[success] # HTTP ~~~ 1.作為前端，可能感覺和http沒有多大關系，但實際在我的開發過程中，會發現比較有意思的一點，http真的 是無處不在，前后臺的傳參，請求，響應。這些都是依靠http 2.本章節可以理解是一個讀書筆記，更多詳細內容看參考文章 ~~~ [本章節參考的文章來源](https://time.geekbang.org/column/article/97837) >[info] ## 前端粗略理解 ~~~ 1.從輸入URL到看到頁面 經歷七個步驟 分別是 1.1.URL 解析 1.2.緩存檢查（強緩存/協商緩存304） 1.3.DNS 解析 1.4.TCP 的三次握手 1.5.HTTP傳輸請求和響應 1.6.TCP 的四次揮手 1.7.渲染頁面 ~~~ >[danger] ##### URL 解析 ~~~ 1.瀏覽器會對我們輸入的url進行解析，主要將其分為下部分：協議、網絡地址(域名，端口號)、資源路徑 1.1.協議：HTTP / HTTPS（SSL）/ FTP（文件上傳）等 1.2.域名：頂級、一級、二級... 1.3.端口號：0~65535 區分同一臺服務器上的不同服務，HTTP:80 HTTPS:443 FTP:21 默認端口號是瀏覽器處理的 舉個例子有時候開發時候地址是 www.kaifa.cn:3000 這就是自定義3000接口訪問 1.4.在資源路徑時候可以通過GET 傳參 形式拼接可以實現兩個頁面之間的信息通信 2.URLEncode,網址中可能會包含非ASCII碼形式的內容，比如中文。而直接把中文放到網址中請求是不允許的， 所以需要用URLEncoder編碼地址 2.1.原理：將需要轉換的內容（ASCII碼形式之外的內容），用十六進制表示法轉換出來，并在之前加上%開頭 2.2.前端對其解碼和編碼可以采用的方法(encodeURI decodeURI )/( encodeURIComponent decodeURIComponent) 這兩組的區別 encodeURI方法不會對下列字符編碼 ASCII字母 數字 ~!@#$&*()=:/,;?+' encodeURIComponent方法不會對下列字符編碼 ASCII字母 數字 ~!*()' 具體參考：https://www.zhihu.com/question/21861899 ~~~ * 如圖  >[danger] ##### 緩存檢查 ~~~ 1.強緩存,瀏覽器會根據response Header來判斷是否對資源進行緩存，如果響應頭中expires、pragma或者 cache-control字段，代表這是強緩存，瀏覽器就會把資源緩存在memory cache 或 disk cache中。 1.1.Expires：緩存過期時間，用來指定資源到期的時間（HTTP/1.0） 1.2.Cache-Control：cache-control: max-age=2592000第一次拿到資源后的2592000秒內（30天），再次發送 請求，讀取緩存中的信息（HTTP/1.1） 1.3.兩者同時存在的話，Cache-Control優先級高于Expires 1.4.符合強緩存條件就直接返回狀態碼200 2.協商緩存就是強緩存失效后，瀏覽器攜帶緩存標識向服務器發送請求，由服務器根據緩存標識來決定是否使用緩 存的過程。 2.1.協商緩存生效，返回304 2.2.Last-Modified / If-Modified-Since 設置協商緩存 2.3.If-Modified-Since則是客戶端再次發起該請求時，攜帶上次請求返回的Last-Modified值，通過此字段值告訴服務 器該資源上次請求返回的最后被修改時間。服務器收到該請求，發現請求頭含有If-Modified-Since字段，則會根據 If-Modified-Since的字段值與該資源在服務器的最后被修改時間做對比，若服務器的資源最后被修改時間大于 If-Modified-Since的字段值，則重新返回資源，狀態碼為200；否則則返回304，代表資源無更新，可繼續使用緩 存文件。 2.4.If-None-Match是客戶端再次發起該請求時，攜帶上次請求返回的唯一標識Etag值，通過此字段值告訴服務器該 資源上次請求返回的唯一標識值。服務器收到該請求后，發現該請求頭中含有If-None-Match，則會根據 If-None-Match的字段值與該資源在服務器的Etag值做對比，一致則返回304，代表資源無更新，繼續使用緩存文件 不一致則重新返回資源文件，狀態碼為200。 3.緩存位置 3.1.'Memory Cache' : 內存緩存 3.2.'Disk Cache'：硬盤緩存 4.打開網頁：查找 disk cache 中是否有匹配，如有則使用，如沒有則發送網絡請求 5.普通刷新 (F5)：因TAB沒關閉，因此memory cache是可用的，會被優先使用，其次才是disk cache 6.強制刷新 (Ctrl + F5)：瀏覽器不使用緩存，因此發送的請求頭部均帶有 Cache-control: no-cache，服務器直接 返回 200 和最新內容 ~~~ * 強緩存  * 協商緩存  [前端瀏覽器緩存知識梳理 ](https://juejin.cn/post/6947936223126093861) >[danger] ##### DNS 解析 ~~~ 1.DNS解析「域名解析」在DNS服務器上，基于域名找到服務器的外網IP，后面我就可以基于服務器的外網IP找 到服務器,如圖百度為例，我們需要將購買的服務器ip和域名做關聯此時才會根據域名找到ip，ip單獨訪問其實也可以 找到網站，但是相對ip這種數字域名這種形式更好被記住 2.查找順序 '瀏覽器緩存→系統緩存→路由器緩存→ISP DNS 緩存→遞歸搜索' 2.1.請求發起后，游覽器首先會解析這個域名，首先它會查看本地硬盤的 hosts 文件，看看其中有沒有和這個域名 對應的規則，如果有的話就直接使用 hosts 文件里面的 ip 地址。 2.2.如果在本地的 hosts 文件沒有能夠找到對應的 ip 地址，瀏覽器會發出一個 DNS請求到本地DNS(域名分布系統) 服務器 。本地DNS服務器一般都是你的網絡接入服務器商提供，比如中國電信，中國移動。 2.3.查詢你輸入的網址的DNS請求到達本地DNS服務器之后，本地DNS服務器會首先查詢它的緩存記錄，如果緩存 中有此條記錄，就可以直接返回結果，此過程是遞歸的方式進行查詢。如果沒有，本地DNS服務器還要向DNS根服 務器進行查詢 2.4.根DNS服務器沒有記錄具體的域名和IP地址的對應關系，而是告訴本地DNS服務器，你可以到域服務器上去繼 續查詢，并給出域服務器的地址。這種過程是迭代的過程 2.5.本地DNS服務器繼續向域服務器發出請求，在這個例子中，請求的對象是.com域服務器。.com域服務器收到請 求之后，也不會直接返回域名和IP地址的對應關系，而是告訴本地DNS服務器，你的域名的解析服務器的地址 2.6.最后，本地DNS服務器向域名的解析服務器發出請求，這時就能收到一個域名和IP地址對應關系，本地DNS 服務器不僅要把IP地址返回給用戶電腦，還要把這個對應關系保存在緩存中，以備下次別的用戶查詢時，可以直 接返回結果，加快網絡訪問。 3.因此我們可以修改電腦的host 讓訪問域名指向我們自己的開發服務器 ~~~ * 域名對應ip  * 查看瀏覽器 [# 如何查看chrome瀏覽器的DNS緩存](https://www.jianshu.com/p/9e7aa4ec4b46) >[danger] ##### TCP 的三次握手 ~~~ 1.客戶端發送一個帶有SYN標志的數據包給服務端，服務端收到后，回傳一個帶有SYN/ACK標志的數據包以示傳 達確認信息，最后客戶端再回傳一個帶ACK標志的數據包，代表握手結束，連接成功。 通俗化之后就是： 客戶端：老弟我要跟你鏈接 服務端：好的，同意了 客戶端：好嘞 2.三次握手完成，TCP客戶端和服務器端成功地建立連接，可以開始傳輸數據了。 ~~~  >[danger] ##### HTTP ~~~ 1.建立TCP連接之后，發起HTTP請求，請求一般分為三部分 1.1.請求方法URI協議/版本 1.2.請求頭(Request Header) 1.3.請求正文 ~~~ >[danger] ##### TCP 的四次揮手 ~~~ 1.為了避免服務器與客戶端雙方的資源占用和損耗，當雙方沒有請求或響應傳遞時，任意一方都可以發起關閉請求。 與創建TCP連接的3次握手類似，關閉TCP連接，需要四次揮手。 客戶端：老弟，我這邊沒數據要傳了，咱們關閉鏈接吧 服務端：好的，接收到了，我看看我這邊還有沒有要傳的 服務端：我這邊也沒有了，關閉吧 客戶端：好嘞 ~~~  >[info] ## 參考 [從輸入URL到瀏覽器顯示頁面發生了什么](https://www.cnblogs.com/yuanzhiguo/p/8119470.html)