在本文中，我將簡單闡述一下“從輸入 URL 到頁面加載完成的整個過程”。作為互聯(lián)網(wǎng)從業(yè)者，不管你屬于何種職位，都應該有所了解。

操作的過程很簡單：打開瀏覽器，在地址欄中鍵盤輸入www.baidu.com，回車，瀏覽網(wǎng)頁….

地址欄輸入www.baidu.com

當你按輸入www.baidu.com，瀏覽器接收到這個消息之后，會觸發(fā)自動完成機制。瀏覽器根據(jù)自己的算法識別出你要訪問的URL。

按下回車鍵

此時，回車鍵的電流回路通過電容器間接地閉合，使得少量的電流進入了鍵盤的主邏輯電路系統(tǒng)中。邏輯電路系統(tǒng)會掃描每個按鍵的狀態(tài)，對于按鍵開關的電位彈跳變化進行解析，并將其轉化為鍵盤碼值。鍵盤控制器在得到碼值之后，將進行編碼。編碼后，鍵碼值將儲存在寄存器內(nèi)。鍵盤的USB控制器會查詢到這個鍵碼值，然后將鍵碼值轉換為一個數(shù)據(jù)包。之后，此數(shù)據(jù)包將通過鍵盤傳遞給計算機，計算機把數(shù)據(jù)包進行解碼。最后，解碼后的按鍵碼值傳輸?shù)讲僮飨到y(tǒng)的硬件層。

解析URL

1. 瀏覽器通過URL可以知道將要使用HTTP協(xié)議，和請求資源的主頁。
2. 瀏覽器會將地址欄中輸入的文字傳給默認的搜索引擎。把文字傳遞給搜索引擎的時候，URL會帶有特定的一串字符，用來告訴搜索引擎這次搜索來自某個瀏覽器。
3. Unicode（規(guī)范字符集）編碼轉換。如果有非ASCII的字符，將其進行Unicode編碼轉換。

檢查HSTS列表

瀏覽器檢查自帶的“HSTS（HTTP嚴格傳輸安全）”列表，這個列表里包含了那些只使用HTTPS進行連接的網(wǎng)站。

DNS查詢與解析

1. 瀏覽器檢查域名是否在緩存當中。
2. 如果緩存中沒有，就調(diào)用庫函數(shù)進行查詢。庫函數(shù)在進行DNS解析之前，檢查域名是否在本地 Hosts 里。
3. 如果域名在緩存和Hosts中都沒有，庫函數(shù)會向 DNS 服務器發(fā)送一條 DNS 查詢請求。
4. 查詢本地的DNS服務器。
5. 首先查詢地址解析協(xié)議（ARP）的緩存，如果緩存命中，則返回結果：目標 IP = MAC地址。如果緩存沒有命中，就看看目標 IP 地址是不是在本地路由表中的某個子網(wǎng)內(nèi)，并使用相關接口。然后查詢選擇的網(wǎng)絡接口的MAC地址。
6. 發(fā)送ARP請求，路由器或其他硬件會返回結果（結果中包含默認網(wǎng)關的IP地址）。
7. 通過TCP/UDP協(xié)議向DNS服務器發(fā)送相應請求。如果本地DNS服務器沒有找到結果，將會逐層查詢，直到結果（目標服務器的IP地址）返回。

使用套接字

瀏覽器得到了目標服務器的 IP 地址，以及 URL 中給出來端口號（http默認端口號是80端口）后，瀏覽器調(diào)用庫函數(shù)socket。這個請求將被封裝，目標端口會被加入頭部。在網(wǎng)絡層會再加入一個IP頭部，里面包含了目標服務器的IP地址以及本機的IP地址。接下來繼續(xù)封裝，將本地內(nèi)置網(wǎng)卡的MAC地址和本地路由器的MAC地址封裝進去。此時封裝包已經(jīng)準備就緒。

接下來，封裝包會從本地計算機出發(fā)，經(jīng)過本地網(wǎng)絡，再通過調(diào)制解調(diào)器把數(shù)字信號轉換成模擬信號。在傳輸線路的另一端，另一個調(diào)制解調(diào)器把模擬信號轉換回數(shù)字信號，交由下一網(wǎng)絡節(jié)點進行處理。最終封包會到達目標服務器。

發(fā)送和接收的過程在TCP連接期間會發(fā)送很多次（三次握手）：客戶端將封包發(fā)送給服務端，并建立連接設置初始的序列號；服務端收到封包后做相應處理，并且向客戶端表明自己接受到了第一個封包；客戶端再次發(fā)送一個封包來確認這次連接。這就是建立連接三次握手的過程。

TLS握手

1. 客戶端發(fā)送相應消息給服務端，表明可用的加密算法以及壓縮算法。
2. 服務端返回給客戶端一個消息，包含了TLS版本，以及自己使用的加密算法和壓縮算法等。
3. 客戶端驗證服務端發(fā)送的信息是否可用，如果可用，就生成一段加密的隨機數(shù)返給服務端。
4. 服務端對這段密文進行解密，并生成自己的主密鑰。
5. 接下來整個會話會進行加密，傳輸http的內(nèi)容。

HTTP協(xié)議

瀏覽器向服務器發(fā)送請求頭，請求頭內(nèi)容包括：請求數(shù)據(jù)方式，http版本號，域名等頭部信息。接下來，服務器端返回一個響應碼，表明這次請求的狀態(tài)。瀏覽器會從自己的緩存中取出想要的內(nèi)容，在解析完 HTML 之后，瀏覽器會重復上面的過程，直到HTML頁面引入的所有資源（圖片，CSS，JS等等）全部都獲取完畢。

瀏覽器

當服務器提供了資源之后（HTML，CSS，JS，圖片等），瀏覽器會執(zhí)行下面的操作：

1. HTML解析。HTML解析器的主要工作是對HTML文檔進行解析，解析出HTML的內(nèi)容。
2. CSS解析。分析CSS文件內(nèi)容以及屬性值，將每個CSS文件都被解析成一個樣式表對象。
3. 頁面渲染。通過一些列計算并呈現(xiàn)DOM樹，過程就是測量-排版-繪制頁面。在渲染過程中，對圖形的渲染處理會使用圖形處理器GPU。

后期渲染

渲染結束后，瀏覽器根據(jù)時間機制運行JavaScript代碼(比如動畫)或與用戶交互。類似Flash和Java的插件也會運行，這些腳本也可能改變網(wǎng)頁的內(nèi)容和布局，并產(chǎn)生又一輪渲染與繪制。

相關術語理解：

• Unicode。Unicode是計算機科學領域里的一項業(yè)界標準，包括字符集、編碼方案。它為每種語言中的每個字符設定了統(tǒng)一并且唯一的二進制編碼，以滿足跨語言、跨平臺進行文本轉換、處理的要求。
• HSTS。HTTP Strict Transport Security，國際互聯(lián)網(wǎng)工程組織IETF正在推行一的種新的Web安全協(xié)議。它作用是強制客戶端（如瀏覽器）使用HTTPS與服務器創(chuàng)建連接。
• DNS服務器。Domain Name Server，域名服務器。是進行域名和與之相對應的IP地址轉換的服務器。
• Hosts。Hosts是一個沒有擴展名的系統(tǒng)文件，可以用記事本等工具打開，其作用就是將一些常用的網(wǎng)址域名與其對應的IP地址建立一個關聯(lián)“數(shù)據(jù)庫”，當用戶在瀏覽器中輸入一個需要登錄的網(wǎng)址時，系統(tǒng)會首先自動從Hosts文件中尋找對應的IP地址，一旦找到，系統(tǒng)會立即打開對應網(wǎng)頁，如果沒有找到，則系統(tǒng)會再將網(wǎng)址提交DNS域名解析服務器進行IP地址的解析。
• ARP。地址解析協(xié)議。是根據(jù)IP地址獲取物理地址的一個TCP/IP協(xié)議。
• MAC地址。稱為物理地址、硬件地址，用來定義網(wǎng)絡設備的位置。
• 套接字。源IP地址和目的IP地址以及源端口號和目的端口號的組合稱為套接字。用于標識客戶端請求的服務器。一般用socket函數(shù)創(chuàng)建。
• TLS。安全傳輸層協(xié)議，用于在兩個通信應用程序之間提供保密性和數(shù)據(jù)完整性。

至此，一個完整的從輸入 URL 到頁面加載完成的過程就走完了。你學會了嗎？

作者：流年，互聯(lián)網(wǎng)產(chǎn)品設計師，4年互聯(lián)網(wǎng)產(chǎn)品設計經(jīng)驗。

本文由 @流年 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。

題圖由作者提供