一、網(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ì)通過分層順序與對(duì)方進(jìn)行通信。分層由高到低分別為：應(yīng)用層、傳輸層、網(wǎng)絡(luò)層、數(shù)據(jù)鏈路層。發(fā)送端從應(yīng)用層往下走，接收端從數(shù)據(jù)鏈路層網(wǎng)上走。如圖所示：
- 在瀏覽器中輸入url
用戶輸入url，例如http://www.baidu.com 。其中http為協(xié)議，www.baidu.com為網(wǎng)絡(luò)地址，及指出需要的資源在那臺(tái)計(jì)算機(jī)上。一般網(wǎng)絡(luò)地址可以為域名或IP地址，此處為域名。使用域名是為了方便記憶，但是為了讓計(jì)算機(jī)理解這個(gè)地址還需要把它解析為IP地址。
2.應(yīng)用層DNS解析域名
客戶端先檢查本地是否有對(duì)應(yīng)的IP地址，若找到則返回響應(yīng)的IP地址。若沒找到則請(qǐng)求上級(jí)DNS服務(wù)器，直至找到或到根節(jié)點(diǎn)。
3.應(yīng)用層客戶端發(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…），返回的信息是否需要緩存，以及客戶端是否發(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é)議通過“三次握手”等方法保證傳輸?shù)陌踩煽俊?br> “三次握手”的過程是，發(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è)過程中，如果發(fā)送端在規(guī)定延遲時(shí)間內(nèi)沒有收到回復(fù)則默認(rèn)接收方?jīng)]有收到請(qǐng)求，而再次發(fā)送，直到收到回復(fù)為止。
5.網(wǎng)絡(luò)層IP協(xié)議查詢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)的過程中需要通過下一個(gè)中轉(zhuǎn)站的MAC地址來搜索下一個(gè)中轉(zhuǎn)目標(biāo)。
6.數(shù)據(jù)到達(dá)數(shù)據(jù)鏈路層
在找到對(duì)方的MAC地址后，就將數(shù)據(jù)發(fā)送到數(shù)據(jù)鏈路層傳輸。這時(shí)，客戶端發(fā)送請(qǐng)求的階段結(jié)束
7.服務(wù)器接收數(shù)據(jù)
接收端的服務(wù)器在鏈路層接收到數(shù)據(jù)包，再層層向上直到應(yīng)用層。這過程中包括在運(yùn)輸層通過TCP協(xié)議講分段的數(shù)據(jù)包重新組成原來的HTTP請(qǐng)求報(bào)文。
8.服務(wù)器響應(yīng)請(qǐng)求
服務(wù)接收到客戶端發(fā)送的HTTP請(qǐng)求后，查找客戶端請(qǐng)求的資源，并返回響應(yīng)報(bào)文，響應(yīng)報(bào)文中包括一個(gè)重要的信息——狀態(tài)碼。狀態(tài)碼由三位數(shù)字組成，其中比較常見的是200 OK表示請(qǐng)求成功。301表示永久重定向，即請(qǐng)求的資源已經(jīng)永久轉(zhuǎn)移到新的位置。在返回301狀態(tài)碼的同時(shí)，響應(yīng)報(bào)文也會(huì)附帶重定向的url，客戶端接收到后將http請(qǐng)求的url做相應(yīng)的改變?cè)僦匦掳l(fā)送。404 not found 表示客戶端請(qǐng)求的資源找不到。
-
服務(wù)器返回相應(yīng)文件
請(qǐng)求成功后，服務(wù)器會(huì)返回相應(yīng)的HTML文件。接下來就到了頁面的渲染階段了。
二、頁面渲染現(xiàn)代瀏覽器渲染頁面的過程是這樣的：jiexiHTML以構(gòu)建DOM樹 –> 構(gòu)建渲染樹 –> 布局渲染樹 –> 繪制渲染樹。
DOM樹是由HTML文件中的標(biāo)簽排列組成，渲染樹是在DOM樹中加入CSS或HTML中的style樣式而形成。渲染樹只包含需要顯示在頁面中的DOM元素，像<head>元素或display屬性值為none的元素都不在渲染樹中。
在瀏覽器還沒接收到完整的HTML文件時(shí)，它就開始渲染頁面了，在遇到外部鏈入的腳本標(biāo)簽或樣式標(biāo)簽或圖片時(shí)，會(huì)再次發(fā)送HTTP請(qǐng)求重復(fù)上述的步驟。在收到CSS文件后會(huì)對(duì)已經(jīng)渲染的頁面重新渲染，加入它們應(yīng)有的樣式，圖片文件加載完立刻顯示在相應(yīng)位置。在這一過程中可能會(huì)觸發(fā)頁面的重繪或重排。
自己大概了解了下流程，文章轉(zhuǎn)自博客網(wǎng)。
