當(dāng)我們從瀏覽器的地址欄輸入 URL, 按下回車,
再到最后出現(xiàn)需要的網(wǎng)頁(yè)界面,
這中間究竟發(fā)生了什么, 接下來就一步步進(jìn)行解析.
主要是如下過程:
- 輸入網(wǎng)址
- DNS 解析
- 客戶端發(fā)送 HTTP 請(qǐng)求
- 建立 TCP 連接
- 服務(wù)器處理請(qǐng)求, 計(jì)算響應(yīng), 返回響應(yīng)
- 瀏覽器渲染頁(yè)面
- 關(guān)閉連接
本篇中只是概述整個(gè)過程, 主要是說明從輸入 URL 到展示出頁(yè)面這個(gè)過程中做了什么, 但不會(huì)對(duì)這中間的每個(gè)子過程進(jìn)行詳細(xì)的介紹, 這些內(nèi)容在我前面的博客都有總結(jié)過, 不清楚的話可以參考看一看, 具體如下.
計(jì)網(wǎng)之初識(shí)網(wǎng)絡(luò)(理解網(wǎng)絡(luò)傳輸?shù)幕玖鞒?
計(jì)網(wǎng)傳輸層協(xié)議:UDP和TCP
計(jì)網(wǎng)之IP協(xié)議和以太網(wǎng), DNS
計(jì)網(wǎng)之HTTP協(xié)議
1. 輸入網(wǎng)址
當(dāng)在瀏覽器中輸入 URL 后敲下回車, 瀏覽器會(huì)對(duì)輸入的信息進(jìn)行以下判斷:
- 檢查輸入的內(nèi)容是不是一個(gè)合法的 URL 鏈接還是一個(gè)待搜素的關(guān)鍵詞.
- 如果是合法的URL鏈接, 判斷輸入的URL是不是一個(gè)完整的URL, 如果不是, 瀏覽器就會(huì)自己猜測(cè), 然后補(bǔ)全這個(gè)URL.
- 如果是一個(gè)待搜索的關(guān)鍵詞, 瀏覽器就會(huì)結(jié)合用戶設(shè)置的默認(rèn)搜索引擎的 URL 來進(jìn)行搜索.
2. 進(jìn)行DNS域名解析
DNS 是由解析器和域名服務(wù)器組成的, 作用是將域名轉(zhuǎn)化成 IP 地址.
我們平時(shí)在瀏覽器中輸入的網(wǎng)址, 其實(shí)就是域名, 當(dāng)我們輸入網(wǎng)址按下回車時(shí), 就發(fā)起了一個(gè) GET 請(qǐng)求, 此時(shí)瀏覽器的 DNS 系統(tǒng)首先要做的事情就是解析這個(gè)域名, 將域名轉(zhuǎn)化成 IP 地址.
通俗的講, 我們更習(xí)慣于記住一個(gè)網(wǎng)站的名字, 比如 www.baidu.com, 而不是記住它的 IP 地址, 比如: 167.23.10.2; 而計(jì)算機(jī)更擅長(zhǎng)記住網(wǎng)站的 IP 地址, 而不是像 www.baidu.com 等鏈接; 類比一下, 其實(shí) DNS 就相當(dāng)于一個(gè)電話本, 你要找 www.baidu.com 這個(gè)域名, 那就去翻一翻電話本, 就能知道它的電話 (IP) 是 167.23.10.2.
3. 進(jìn)行封裝
瀏覽器拿到域名對(duì)應(yīng)的 IP 地址之后, 就可以構(gòu)造出 HTTP 數(shù)據(jù)報(bào), 將其交給傳輸層, 會(huì)以一個(gè)隨機(jī)端口 (1024~65535) 向服務(wù)器的 Web 程序的 80 端口 (是服務(wù)器偵聽網(wǎng)頁(yè)客戶端請(qǐng)求的默認(rèn)端口) 發(fā)起 TCP 的連接請(qǐng)求 (三次握手) , 接著將數(shù)據(jù)交給了網(wǎng)絡(luò)層, IP協(xié)議將其封裝成立IP數(shù)據(jù)報(bào), 然后交給數(shù)據(jù)鏈路層, 轉(zhuǎn)換成二進(jìn)制形式的比特 (bit) 流, 從網(wǎng)卡發(fā)送出去, 再把比特轉(zhuǎn)換成電子, 光學(xué)或微波信號(hào)在網(wǎng)絡(luò)中傳輸最終通過網(wǎng)卡傳輸出去.
4. 進(jìn)行傳輸
傳輸?shù)倪^程中, 經(jīng)過一些網(wǎng)絡(luò)設(shè)備, 交換機(jī)和路由器等;
- 交換機(jī)把數(shù)據(jù)分用到數(shù)據(jù)鏈路, 再重新封裝, 繼續(xù)轉(zhuǎn)發(fā).
- 路由器會(huì)把數(shù)據(jù)分用到網(wǎng)絡(luò)層, 重新封裝, 接著路由器會(huì)根據(jù)數(shù)據(jù)報(bào)中的目的 IP 在路由表中匹配, 找個(gè)合適的方向發(fā)出去, 每次轉(zhuǎn)發(fā) TTL 都會(huì)減1 (TTL 是一個(gè) IP 協(xié)議的值, 它告訴網(wǎng)絡(luò), 數(shù)據(jù)包在網(wǎng)絡(luò)中的時(shí)間是否太長(zhǎng)而應(yīng)被丟棄).
5. 服務(wù)器接收請(qǐng)求, 根據(jù)請(qǐng)求計(jì)算響應(yīng), 重新封裝, 返回響應(yīng)
服務(wù)器通過監(jiān)聽端口來獲取到客戶端的 HTTP 請(qǐng)求, 與客戶端建立 TCP 連接后, 服務(wù)器開始接收客戶端發(fā)來的數(shù)據(jù), 首先進(jìn)入到網(wǎng)卡, 然后是進(jìn)入到內(nèi)核的 TCP/IP 協(xié)議棧分用數(shù)據(jù) (用于識(shí)別該連接請(qǐng)求, 解封包, 一層一層的剝開), 終通過 HTTP 解碼, 從接收到的數(shù)據(jù)中進(jìn)行解析, 找到你想要訪問的那個(gè)資源, 將資源構(gòu)造成 HTTP 響應(yīng), 再將響應(yīng)層層封裝發(fā)送給客戶端瀏覽器.
這樣一個(gè) HTTP 通信就完成了, 服務(wù)器會(huì)根據(jù) HTTP 請(qǐng)求中的 Connection 字段, 決定是否關(guān)閉 TCP 連接通道, Connection 字段值為 keep-alive 時(shí), 服務(wù)器不會(huì)立刻關(guān)閉連接, 保證通信的完成.
6. 瀏覽器接收響應(yīng), 進(jìn)行渲染頁(yè)面, 最終呈現(xiàn)一個(gè)完整的頁(yè)面
瀏覽器接收到響應(yīng)內(nèi)容之后, 還是先對(duì)數(shù)據(jù)進(jìn)行分用, 最后瀏覽器會(huì)解析 HTML 文件生成主頁(yè)框架(構(gòu)建 dom 樹), JS 的解析是由瀏覽器中的 JS 解析引擎完成的, 比如谷歌的是 V8.
在解析過程中, 如果同時(shí)遇到請(qǐng)求外部資源時(shí), 如圖片, 外鏈的 CSS 等靜態(tài)資源的引用, 會(huì)向服務(wù)器繼續(xù)發(fā)送請(qǐng)求, 請(qǐng)求的內(nèi)容就是主頁(yè)里的一些資源, 例如圖片, 視頻, JS文件等…
這些請(qǐng)求過程是異步的, 并不會(huì)影響 HTML 頁(yè)面進(jìn)行加載.文章來源：http://www.zghlxwxcb.cn/news/detail-475286.html
7. 斷開連接
此時(shí)整個(gè)過程結(jié)束, 最后通過四次揮手, 瀏覽器和客戶端的連接.文章來源地址http://www.zghlxwxcb.cn/news/detail-475286.html
到了這里，關(guān)于URL到頁(yè)面: 探索網(wǎng)頁(yè)加載的神秘過程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
