當咱們在瀏覽器地址欄輸入網址，到最後看到頁面，中間都經歷了什麼？

時間 2019-11-30

原文原文鏈接

當咱們在地址欄輸入網址後，會進行URL地址解析、DNS域名解析、和服務器TCP鏈接（三次握手）、把客戶端信息傳遞給服務器（發送HTTP請求）、服務器獲得並處理請求（HTTP響應內容）、客戶端渲染服務器返回內容、與服務器斷開TCP鏈接（四次揮手）,這七個步驟。javascript

下面咱們來詳細看一下每一步經歷的內容html

1. URL地址解析

URI/URL/URN

URI：Uniform Resource Identifier 統一資源標識服，URL和URN是URI的子集
URL：Uniform Resource Locator 統一資源定位服，根據這個地址能找到對應的資源
URN：Uniform Resource Name 統一資源名稱，通常指國際上通用的（標準的）一些名字（例如：國際統一發版的編號）

一個完整的URL包含的內容

例如：www.baidu.com:80/index.html?…java

協議（http://）傳輸協議就是可以把客戶端和服務器端通訊的信息進行傳輸的工具（相似於快遞小哥）
- http：超文本傳輸協議，除了傳遞文本，還能夠傳遞媒體資源文件（或者流文件）及xml格式數據
- https：更加安全的http，通常涉及支付的網站都要採用https協議。（s:ssl 加密傳輸）
- ftp：文件傳輸協議（通常應用於把本地資源上傳到服務器端）
  - FileZilla:FTP上傳工具，經過這個工具，經過FTP傳輸協議，咱們能夠把本地的文件上傳到服務器上
域名（www.baidu.com）：一個讓用戶方便記憶的名字（不經過域名，咱們也能夠直接用服務器的外網IP也能訪問到服務器，可是外網IP很差記）
- 頂級域名（以騰訊爲例：qq.com)
- 一級域名（www.qq.com)
- 二級域名（sports.qq.com)
- 三級域名（kbs.sports.qq.com)
- .com 國際域名
- .cn 中文域名
- .edu 教育
- .....
端口號（:80）：端口號的取值範圍0～65535，用端口號來區分同一臺服務器上的不一樣項目
- http默認端口號：80
- https默認端口號：443
- ftp默認端口號：21
- 若是項目採用的就是默認端口號，咱們在書寫地址的時候，不用加端口號，瀏覽器在發送請求的時候會幫咱們默認給加
請求資源路徑名稱（index.html）
- 默認的路徑或者名稱（xxx.com/不指定資源名，服務器會找默認的資源，通常默認的資源名是default.html、index.html...固然這些能夠在服務器端本身配置）
- 用戶注意僞URL地址的處理（URL重寫技術是爲來增長SEO搜索引擎優化的，動態的網址通常不能被搜索引擎收錄，因此咱們要把動態網址靜態化，此時須要的是重寫URL）
問號傳參信息（?from=ch*x=1）目的就是信息傳輸
- 客戶端把信息傳遞給服務器，有不少方式
  - URL地址問號傳參
  - 請求報文傳輸（請求頭和請求主體）
HASH值（#hash）
- 也能充當信息傳輸的方式
- 錨點定位
- 基於HASH實現路由管控（不一樣的HASH值，展現不一樣的組件和模塊）

特殊字符加密和解密

請求的地址中，若是出現非有效unicode編碼內容，現代版瀏覽器會默認的進行編碼瀏覽器

能夠基於encodeURI編碼，咱們也能夠基於encodeURI解碼，咱們通常用encodeURI編碼的是整個URL，這樣整個URL中的特殊字符都會自動編譯
encodeURIComponent/decodeURIComponent，它相對於encodeURI來講，不用於給整個URL編碼，而是給URL部分信息進行編碼（通常都是問號傳參的指編碼）
- 客戶端和服務器端進行信息傳播的時候，若是須要把請求的地址和信息編碼，咱們則基於以上兩種方式處理，服務器端也存在這些方法，這樣就能夠統一編碼解碼了
客戶端還存在一種方式，針對於中文的編碼方式，escape/unescape，這種方式通常只應用與客戶端頁面之間本身的處理，例如：從列表跳轉到詳情，咱們能夠把傳遞的中文信息基於這個編碼，詳情頁獲取編碼後的信息在解碼，在好比咱們在客戶端中的cookie信息，若是信息是中文，咱們也基於這種方法編碼

<buttom id='link'>按鈕</button>
    <script> link.onclick=function(){ //跳轉頁面 window.location.href="https://www.baidu.com/"; //重新的頁面打開網址 window.open('https://www.baidu.com'); } </script>
    <script> //基於JS實現頁面跳轉 let url = window.location.href; //=>跳轉頁面 window.location.href = "https://www.baidu.com/?from=" + encodeURIComponent(url); window.open("https://www.baidu.com/"); </script>
複製代碼

2. DNS域名解析

DNS服務器：域名解析服務器，在服務器上存儲着域名<=>服務器外網IP 的相關記錄緩存

而咱們發送請求時候所謂的DNS解析，其實就是根據域名在DNS服務器上查找到對應服務器的外網IP安全

NDS優化

DNS緩存（通常瀏覽器會在第一次解析後，默認創建緩存，時間很短，只有一分鐘左右）
減小DNS解析次數（一個網站中咱們須要發送請求的域名和服務器儘量少便可）
進行DNS預獲取(dns-prefetch)：在頁面加載開始的時候，就把當前頁面中須要訪問其餘域名（服務器）的信息進行提早DNS解析，之後加載到具體內容部分能夠不用解析了

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//static.360buyimg.com">
<link rel="dns-prefetch" href="//misc.360buyimg.com">
<link rel="dns-prefetch" href="//img10.360buyimg.com">
<link rel="dns-prefetch" href="//img11.360buyimg.com">
<link rel="dns-prefetch" href="//img12.360buyimg.com">
......
複製代碼

3. 和服務器TCP鏈接（三次握手）

TCP是個傳輸協議服務器

第一次握手：由瀏覽器發起，告訴服務器我要發送請求了
第二次握手：由服務器發起，告訴瀏覽器我準備接受了，你趕忙發送吧
第三次握手：由瀏覽器發送，告訴服務器，我立刻就發了，準備接受吧

![](創建TCP鏈接（三次握手） cookie

4. 把客戶端信息傳遞給服務器（發送HTTP請求）

請求報文：全部通過傳輸協議，客戶端傳遞給服務器的內容，都被稱爲請求報文

起始行
請求頭（首部）
請求主體

響應報文：全部通過傳輸協議，服務器返回給客戶端的內容，都被稱爲響應報文

HTTP響應狀態碼（經常使用的）
- 200 / 201 / 204
- 301 / 302 / 304 / 307
- 400 / 401 / 404
- 500 / 503
響應頭（首部）
響應主體

HTTP報文：請求報文+響應報文

谷歌瀏覽器F12 =》network(全部客戶端和服務器端的交互信息在這裏均可以看到)，點擊某一條信息，在右側能夠看到全部的HTTP報文信息負載均衡

5. 服務器獲得並處理請求（HTTP響應內容）

通常服務器分爲：WEB（圖片）服務器和數據服務器工具

Tomcat、 Nginx、 Apache、 IIS ......

響應報文：全部通過傳輸協議，服務器返回給客戶端的內容，都成爲響應報文

響應狀態碼
- 200 OK：成功
- 201 Created：成功（通常應用與告訴服務器建立一個新文件，最後服務器建立成功後返回狀態碼）
- 204 No Content：對於某些請求（例如：PUT或者DELETE），服務器不想處理，能夠返回空內容，而且用204狀態碼告知
- 301 Moved Permanently 永久重定向（永久轉移）
- 302 Moved Temporarily 臨時轉移，很早之前基本上用302來作，可是如今主要用307來處理這個事情，
- 304 Not Modified ：設置HTTP的協商緩存
- 307 意思就是臨時重定向Moved Temporarily，主要用於：服務器的負載均衡等
- 400 Bad Request：傳遞給服務器的參數錯誤
- 401 Unauthorized: 無權限訪問
- 404 Not Found: 請求地址錯誤
- 500 Internal Server Error: 未知服務器錯誤
- 503 Service Unavailable: 服務器超負荷
響應頭（首部）
響應主體