資訊專(zhuān)欄INFORMATION COLUMN
摘要：分層由高到低分別為應(yīng)用層傳輸層網(wǎng)絡(luò)層數(shù)據(jù)鏈路層。狀態(tài)碼由三位數(shù)字組成，其中比較常見(jiàn)的是表示請(qǐng)求成功。在返回狀態(tài)碼的同時(shí)，響應(yīng)報(bào)文也會(huì)附帶重定向的，客戶(hù)端接收到后將請(qǐng)求的做相應(yīng)的改變?cè)僦匦掳l(fā)送。
當(dāng)在瀏覽器地址欄輸入網(wǎng)址，如：http://cn.bing.com 后瀏覽器是怎么把最終的頁(yè)面呈現(xiàn)出來(lái)的呢？這個(gè)過(guò)程可以大致分為兩個(gè)部分：網(wǎng)絡(luò)通信和頁(yè)面渲染。
一、網(wǎng)絡(luò)通信
互聯(lián)網(wǎng)內(nèi)各網(wǎng)絡(luò)設(shè)備間的通信都遵循TCP/IP協(xié)議，利用TCP/IP協(xié)議族進(jìn)行網(wǎng)絡(luò)通信時(shí)，會(huì)通過(guò)分層順序與對(duì)方進(jìn)行通信。分層由高到低分別為：應(yīng)用層、傳輸層、網(wǎng)絡(luò)層、數(shù)據(jù)鏈路層。發(fā)送端從應(yīng)用層往下走，接收端從數(shù)據(jù)鏈路層網(wǎng)上走。如圖所示：
在瀏覽器中輸入url
用戶(hù)輸入url，例如http://cn.bing.com。其中http為協(xié)議，cn.bing.com為網(wǎng)絡(luò)地址，及指出需要的資源在那臺(tái)計(jì)算機(jī)上。一般網(wǎng)絡(luò)地址可以為域名或IP地址，此處為域名。使用域名是為了方便記憶，但是為了讓計(jì)算機(jī)理解這個(gè)地址還需要把它解析為IP地址。
2.應(yīng)用層DNS解析域名
客戶(hù)端先檢查本地是否有對(duì)應(yīng)的IP地址，若找到則返回響應(yīng)的IP地址。若沒(méi)找到則請(qǐng)求上級(jí)DNS服務(wù)器，直至找到或到根節(jié)點(diǎn)。
3.應(yīng)用層客戶(hù)端發(fā)送HTTP請(qǐng)求
HTTP請(qǐng)求包括請(qǐng)求報(bào)頭和請(qǐng)求主體兩個(gè)部分，其中請(qǐng)求報(bào)頭包含了至關(guān)重要的信息，包括請(qǐng)求的方法（GET / POST）、目標(biāo)url、遵循的協(xié)議（http / https / ftp…），返回的信息是否需要緩存，以及客戶(hù)端是否發(fā)送cookie等。
4.傳輸層TCP傳輸報(bào)文
位于傳輸層的TCP協(xié)議為傳輸報(bào)文提供可靠的字節(jié)流服務(wù)。它為了方便傳輸，將大塊的數(shù)據(jù)分割成以報(bào)文段為單位的數(shù)據(jù)包進(jìn)行管理，并為它們編號(hào)，方便服務(wù)器接收時(shí)能準(zhǔn)確地還原報(bào)文信息。TCP協(xié)議通過(guò)“三次握手”等方法保證傳輸?shù)陌踩煽俊?/p>
“三次握手”的過(guò)程是，發(fā)送端先發(fā)送一個(gè)帶有SYN（synchronize）標(biāo)志的數(shù)據(jù)包給接收端，在一定的延遲時(shí)間內(nèi)等待接收的回復(fù)。接收端收到數(shù)據(jù)包后，傳回一個(gè)帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息。接收方收到后再發(fā)送一個(gè)帶有ACK標(biāo)志的數(shù)據(jù)包給接收端以示握手成功。在這個(gè)過(guò)程中，如果發(fā)送端在規(guī)定延遲時(shí)間內(nèi)沒(méi)有收到回復(fù)則默認(rèn)接收方?jīng)]有收到請(qǐng)求，而再次發(fā)送，直到收到回復(fù)為止。
5.網(wǎng)絡(luò)層IP協(xié)議查詢(xún)MAC地址
IP協(xié)議的作用是把TCP分割好的各種數(shù)據(jù)包傳送給接收方。而要保證確實(shí)能傳到接收方還需要接收方的MAC地址，也就是物理地址。IP地址和MAC地址是一一對(duì)應(yīng)的關(guān)系，一個(gè)網(wǎng)絡(luò)設(shè)備的IP地址可以更換，但是MAC地址一般是固定不變的。ARP協(xié)議可以將IP地址解析成對(duì)應(yīng)的MAC地址。當(dāng)通信的雙方不在同一個(gè)局域網(wǎng)時(shí)，需要多次中轉(zhuǎn)才能到達(dá)最終的目標(biāo)，在中轉(zhuǎn)的過(guò)程中需要通過(guò)下一個(gè)中轉(zhuǎn)站的MAC地址來(lái)搜索下一個(gè)中轉(zhuǎn)目標(biāo)。
6.數(shù)據(jù)到達(dá)數(shù)據(jù)鏈路層
在找到對(duì)方的MAC地址后，就將數(shù)據(jù)發(fā)送到數(shù)據(jù)鏈路層傳輸。這時(shí)，客戶(hù)端發(fā)送請(qǐng)求的階段結(jié)束
7.服務(wù)器接收數(shù)據(jù)
接收端的服務(wù)器在鏈路層接收到數(shù)據(jù)包，再層層向上直到應(yīng)用層。這過(guò)程中包括在運(yùn)輸層通過(guò)TCP協(xié)議講分段的數(shù)據(jù)包重新組成原來(lái)的HTTP請(qǐng)求報(bào)文。
8.服務(wù)器響應(yīng)請(qǐng)求
服務(wù)接收到客戶(hù)端發(fā)送的HTTP請(qǐng)求后，查找客戶(hù)端請(qǐng)求的資源，并返回響應(yīng)報(bào)文，響應(yīng)報(bào)文中包括一個(gè)重要的信息——狀態(tài)碼。狀態(tài)碼由三位數(shù)字組成，其中比較常見(jiàn)的是200 OK表示請(qǐng)求成功。301表示永久重定向，即請(qǐng)求的資源已經(jīng)永久轉(zhuǎn)移到新的位置。在返回301狀態(tài)碼的同時(shí)，響應(yīng)報(bào)文也會(huì)附帶重定向的url，客戶(hù)端接收到后將http請(qǐng)求的url做相應(yīng)的改變?cè)僦匦掳l(fā)送。404 not found 表示客戶(hù)端請(qǐng)求的資源找不到。
9.服務(wù)器返回相應(yīng)文件
請(qǐng)求成功后，服務(wù)器會(huì)返回相應(yīng)的HTML文件。接下來(lái)就到了頁(yè)面的渲染階段了。
10.關(guān)閉TCP連接
為了避免服務(wù)器與客戶(hù)端雙方的資源占用和損耗，當(dāng)雙方?jīng)]有請(qǐng)求或響應(yīng)傳遞時(shí)，任意一方都可以發(fā)起關(guān)閉請(qǐng)求。與創(chuàng)建TCP連接的3次握手類(lèi)似，關(guān)閉TCP連接，需要4次握手。
二、頁(yè)面渲染
現(xiàn)代瀏覽器渲染頁(yè)面的過(guò)程是這樣的：解析HTML以構(gòu)建DOM樹(shù) –> 構(gòu)建渲染樹(shù) –> 布局渲染樹(shù) –> 繪制渲染樹(shù)。
DOM樹(shù)是由HTML文件中的標(biāo)簽排列組成，渲染樹(shù)是在DOM樹(shù)中加入CSS或HTML中的style樣式而形成。渲染樹(shù)只包含需要顯示在頁(yè)面中的DOM元素，像
元素或display屬性值為none的元素都不在渲染樹(shù)中。在瀏覽器還沒(méi)接收到完整的HTML文件時(shí)，它就開(kāi)始渲染頁(yè)面了，在遇到外部鏈入的腳本標(biāo)簽或樣式標(biāo)簽或圖片時(shí)，會(huì)再次發(fā)送HTTP請(qǐng)求重復(fù)上述的步驟。在收到CSS文件后會(huì)對(duì)已經(jīng)渲染的頁(yè)面重新渲染，加入它們應(yīng)有的樣式，圖片文件加載完立刻顯示在相應(yīng)位置。在這一過(guò)程中可能會(huì)觸發(fā)頁(yè)面的重繪或重排。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/31651.html
摘要：在瀏覽器中輸入到顯示網(wǎng)頁(yè)主要包含兩個(gè)部分網(wǎng)絡(luò)通信和頁(yè)面渲染互聯(lián)網(wǎng)內(nèi)各網(wǎng)絡(luò)設(shè)備間的通信都遵循協(xié)議，利用協(xié)議族進(jìn)行網(wǎng)絡(luò)通信時(shí)，會(huì)通過(guò)分層順序與對(duì)方進(jìn)行通信。狀態(tài)碼主要包括以下部分指示信息表示請(qǐng)求已接收，繼續(xù)處理。在瀏覽器中輸入url到顯示網(wǎng)頁(yè)主要包含兩個(gè)部分： 網(wǎng)絡(luò)通信和頁(yè)面渲染 互聯(lián)網(wǎng)內(nèi)各網(wǎng)絡(luò)設(shè)備間的通信都遵循TCP/IP協(xié)議，利用TCP/IP協(xié)議族進(jìn)行網(wǎng)絡(luò)通信時(shí)，會(huì)通過(guò)分層順序與對(duì)方進(jìn)行通信...
摘要：詢(xún)問(wèn)權(quán)威的服務(wù)器域名服務(wù)器會(huì)繼續(xù)檢查請(qǐng)求的下一部分，并將查詢(xún)指向負(fù)責(zé)此特定域名的服務(wù)器這些權(quán)威的服務(wù)器將負(fù)責(zé)了解關(guān)于特定域的所有信息，并將信息存儲(chǔ)在記錄。 面試經(jīng)典題——URL加載 一、涉及基本知識(shí)點(diǎn)： 1. 計(jì)算機(jī)網(wǎng)絡(luò) 五層因特爾協(xié)議棧： 應(yīng)用層（dns、http）：DNS解析成IP并完成http請(qǐng)求發(fā)送； 傳輸層（tcp、udp）：三次握手四次揮手模式建立tcp連接； 網(wǎng)絡(luò)層...
摘要：詢(xún)問(wèn)權(quán)威的服務(wù)器域名服務(wù)器會(huì)繼續(xù)檢查請(qǐng)求的下一部分，并將查詢(xún)指向負(fù)責(zé)此特定域名的服務(wù)器這些權(quán)威的服務(wù)器將負(fù)責(zé)了解關(guān)于特定域的所有信息，并將信息存儲(chǔ)在記錄。 面試經(jīng)典題——URL加載 一、涉及基本知識(shí)點(diǎn)： 1. 計(jì)算機(jī)網(wǎng)絡(luò) 五層因特爾協(xié)議棧： 應(yīng)用層（dns、http）：DNS解析成IP并完成http請(qǐng)求發(fā)送； 傳輸層（tcp、udp）：三次握手四次揮手模式建立tcp連接； 網(wǎng)絡(luò)層...
摘要：詢(xún)問(wèn)權(quán)威的服務(wù)器域名服務(wù)器會(huì)繼續(xù)檢查請(qǐng)求的下一部分，并將查詢(xún)指向負(fù)責(zé)此特定域名的服務(wù)器這些權(quán)威的服務(wù)器將負(fù)責(zé)了解關(guān)于特定域的所有信息，并將信息存儲(chǔ)在記錄。 面試經(jīng)典題——URL加載 一、涉及基本知識(shí)點(diǎn)： 1. 計(jì)算機(jī)網(wǎng)絡(luò) 五層因特爾協(xié)議棧： 應(yīng)用層（dns、http）：DNS解析成IP并完成http請(qǐng)求發(fā)送； 傳輸層（tcp、udp）：三次握手四次揮手模式建立tcp連接； 網(wǎng)絡(luò)層...
閱讀 1282·2021-11-24 11:16
閱讀 3491·2021-11-15 11:38
閱讀 2020·2021-10-20 13:47
閱讀 628·2021-09-29 09:35
閱讀 2262·2021-09-22 15:17
閱讀 1087·2021-09-07 09:59
閱讀 3443·2019-08-30 13:21
閱讀 2959·2019-08-30 12:47
