散文網(wǎng) » 生活 »日常 » 瀏覽器種輸入一個(gè)url到顯示頁面全過程

瀏覽器種輸入一個(gè)url到顯示頁面全過程

2023-07-07 22:21 作者:chaojilaji123 0人讀過 | 我要投稿

原文合集地址如下，有需要的朋友可以關(guān)注

本文地址

合集地址

所謂的‘三顆樹’

在瀏覽器中，當(dāng)解析和加載網(wǎng)頁時(shí)，會(huì)形成三個(gè)重要的樹結(jié)構(gòu)：DOM樹、CSSOM樹和渲染樹（Render Tree）。這些樹結(jié)構(gòu)在網(wǎng)頁的渲染和布局過程中起到關(guān)鍵作用。

DOM樹（Document Object Model Tree）： DOM樹表示HTML文檔的結(jié)構(gòu)，它由瀏覽器解析HTML代碼生成。DOM樹以層次結(jié)構(gòu)的方式表示文檔中的HTML元素（例如<html>、<body>、<div>等），每個(gè)元素都是DOM樹的節(jié)點(diǎn)。DOM樹包括元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)等。DOM樹反映了HTML文檔的層次結(jié)構(gòu)和標(biāo)記嵌套關(guān)系。
CSSOM樹（CSS Object Model Tree）： CSSOM樹表示CSS樣式規(guī)則的層次結(jié)構(gòu)。它由瀏覽器解析CSS文件和嵌入式樣式，并將它們轉(zhuǎn)化為樹形結(jié)構(gòu)。CSSOM樹包含了網(wǎng)頁中所有的CSS規(guī)則，如選擇器、樣式屬性等。CSSOM樹和DOM樹是相互獨(dú)立的，但是它們通過元素的匹配來建立關(guān)聯(lián)。
渲染樹（Render Tree）：渲染樹是將DOM樹和CSSOM樹合并后的結(jié)果。它是瀏覽器用于渲染頁面的關(guān)鍵結(jié)構(gòu)。渲染樹中的每個(gè)節(jié)點(diǎn)被稱為渲染對(duì)象，它包括了頁面上需要顯示的所有元素（如可見元素、盒子模型等）以及與之相關(guān)的樣式信息。渲染樹中的每個(gè)節(jié)點(diǎn)都有布局和繪制信息，用于確定元素在頁面上的位置和外觀。

渲染樹的生成過程如下：

瀏覽器解析HTML代碼并構(gòu)建DOM樹。
瀏覽器解析CSS代碼并構(gòu)建CSSOM樹。
將DOM樹和CSSOM樹進(jìn)行合并，生成渲染樹。
根據(jù)渲染樹進(jìn)行布局（確定元素的大小和位置）。
根據(jù)渲染樹進(jìn)行繪制（繪制頁面上的每個(gè)元素）。

渲染樹的生成過程中，瀏覽器會(huì)根據(jù)CSS規(guī)則和DOM結(jié)構(gòu)進(jìn)行計(jì)算，確定哪些節(jié)點(diǎn)應(yīng)該在渲染樹中顯示，哪些節(jié)點(diǎn)應(yīng)該被忽略（例如隱藏的元素、不可見的元素等）。這樣可以提高渲染性能，并確保只繪制頁面上需要顯示的內(nèi)容。

通過渲染樹，瀏覽器可以快速確定需要渲染和顯示的元素，然后進(jìn)行布局和繪制，最終呈現(xiàn)給用戶。

url解析過程

當(dāng)瀏覽器接收到一個(gè)URL并開始加載頁面時(shí)，以下是瀏覽器接受URL到頁面呈現(xiàn)的過程：

1.URL解析：

瀏覽器會(huì)解析URL，提取出協(xié)議（如HTTP、HTTPS）、主機(jī)名（如www.example.com）和路徑等信息。

URL解析過程

URL解析是將輸入的URL字符串分解成各個(gè)組成部分的過程。以下是URL解析的詳細(xì)過程：

(1). 解析協(xié)議（Protocol）： URL以協(xié)議開頭，例如"http://"或"https://"。解析器會(huì)讀取協(xié)議部分，并確定使用的協(xié)議（如HTTP、HTTPS、FTP等）。

(2). 解析主機(jī)名（Host）：在協(xié)議后面是主機(jī)名，可以是域名（如www.example.com）或IP地址（如192.168.0.1）。解析器會(huì)提取主機(jī)名部分，并將其作為目標(biāo)服務(wù)器的地址。

(3). 解析端口號(hào)（Port）：如果URL中指定了端口號(hào)（如http://www.example.com:8080），解析器會(huì)提取端口號(hào)并將其用于建立與服務(wù)器的連接。如果URL中沒有指定端口號(hào)，則根據(jù)協(xié)議的默認(rèn)端口號(hào)來確定。

(4). 解析路徑（Path）：路徑指定了服務(wù)器上請(qǐng)求資源的位置。解析器會(huì)提取路徑部分，并將其作為請(qǐng)求的目標(biāo)資源路徑。

(5). 解析查詢參數(shù)（Query Parameters）： URL中可能包含查詢參數(shù)，用于向服務(wù)器傳遞額外的數(shù)據(jù)。查詢參數(shù)以"?"開始，然后是以"&"分隔的多個(gè)鍵值對(duì)（如?key1=value1&key2=value2）。解析器會(huì)提取查詢參數(shù)，并將其作為請(qǐng)求的一部分發(fā)送給服務(wù)器。

(6). 解析片段標(biāo)識(shí)符（Fragment Identifier）： URL中的片段標(biāo)識(shí)符用于定位文檔中的特定部分，通常以"#"后面跟著一個(gè)標(biāo)識(shí)符的形式出現(xiàn)（如#section1）。解析器會(huì)提取片段標(biāo)識(shí)符，但不會(huì)將其發(fā)送給服務(wù)器。它通常在瀏覽器端使用，用于滾動(dòng)到指定位置或定位到特定部分。

(7). 解析其他信息：解析器還可以提取其他URL中可能包含的信息，如用戶名、密碼等，這些信息可以用于身份驗(yàn)證或其他目的。

URL解析過程的結(jié)果是將URL拆分成協(xié)議、主機(jī)名、端口號(hào)、路徑、查詢參數(shù)和片段標(biāo)識(shí)符等組成部分，這些組成部分將用于建立與服務(wù)器的連接并請(qǐng)求相應(yīng)的資源。解析后的URL信息將被瀏覽器使用來進(jìn)行網(wǎng)絡(luò)請(qǐng)求并加載頁面。

2. 發(fā)起網(wǎng)絡(luò)請(qǐng)求：

瀏覽器使用解析后的URL信息，通過網(wǎng)絡(luò)發(fā)送HTTP請(qǐng)求到服務(wù)器，請(qǐng)求獲取網(wǎng)頁的HTML文件。這個(gè)過程涉及到TCP連接（即連接時(shí)三次握手，斷開時(shí)四次揮手），連接成功后就發(fā)送HTTP請(qǐng)求等操作，具體如下。

發(fā)起網(wǎng)絡(luò)請(qǐng)求過程

發(fā)起網(wǎng)絡(luò)請(qǐng)求是指瀏覽器向服務(wù)器發(fā)送請(qǐng)求以獲取網(wǎng)頁資源的過程。以下是發(fā)起網(wǎng)絡(luò)請(qǐng)求的詳細(xì)過程：

(1). 建立與服務(wù)器的連接：瀏覽器使用解析后的主機(jī)名和端口號(hào)（如果有）建立與目標(biāo)服務(wù)器的網(wǎng)絡(luò)連接。它可以是TCP連接或TLS（Transport Layer Security）連接，具體取決于使用的協(xié)議（如HTTP或HTTPS）。

(2). 創(chuàng)建請(qǐng)求報(bào)文：瀏覽器構(gòu)建一個(gè)包含請(qǐng)求信息的請(qǐng)求報(bào)文。請(qǐng)求報(bào)文包括請(qǐng)求行、請(qǐng)求頭和請(qǐng)求主體。請(qǐng)求行包含請(qǐng)求的方法（如GET、POST）、路徑和協(xié)議版本。請(qǐng)求頭包含與請(qǐng)求相關(guān)的附加信息，如用戶代理、Accept-Encoding（用于指定支持的內(nèi)容編碼）、Cookies等。請(qǐng)求主體包含在POST請(qǐng)求中發(fā)送的數(shù)據(jù)。

(3). 發(fā)送請(qǐng)求報(bào)文：瀏覽器將構(gòu)建好的請(qǐng)求報(bào)文發(fā)送給服務(wù)器。它通過網(wǎng)絡(luò)連接將請(qǐng)求報(bào)文作為數(shù)據(jù)包發(fā)送出去。數(shù)據(jù)包通過互聯(lián)網(wǎng)的網(wǎng)絡(luò)基礎(chǔ)設(shè)施傳輸?shù)侥繕?biāo)服務(wù)器。

(4). 服務(wù)器接收請(qǐng)求報(bào)文：目標(biāo)服務(wù)器接收到請(qǐng)求報(bào)文，并進(jìn)行相應(yīng)的處理。服務(wù)器會(huì)解析請(qǐng)求報(bào)文，提取出請(qǐng)求的目標(biāo)資源和相關(guān)信息。

(5). 處理請(qǐng)求：服務(wù)器根據(jù)請(qǐng)求報(bào)文中的信息，處理請(qǐng)求并準(zhǔn)備相應(yīng)的響應(yīng)。這可能涉及訪問數(shù)據(jù)庫、運(yùn)行服務(wù)器端腳本等操作，以生成響應(yīng)內(nèi)容。

(6). 創(chuàng)建響應(yīng)報(bào)文：服務(wù)器構(gòu)建一個(gè)包含響應(yīng)信息的響應(yīng)報(bào)文。響應(yīng)報(bào)文包括狀態(tài)行、響應(yīng)頭和響應(yīng)主體。狀態(tài)行包含響應(yīng)的狀態(tài)碼（如200表示成功、404表示資源未找到等）和協(xié)議版本。響應(yīng)頭包含與響應(yīng)相關(guān)的附加信息，如內(nèi)容類型、日期、緩存控制等。響應(yīng)主體包含服務(wù)器返回的數(shù)據(jù)。

(7). 發(fā)送響應(yīng)報(bào)文：服務(wù)器將構(gòu)建好的響應(yīng)報(bào)文發(fā)送回瀏覽器。響應(yīng)報(bào)文通過網(wǎng)絡(luò)連接傳輸回瀏覽器。

(8). 瀏覽器接收響應(yīng)報(bào)文：瀏覽器接收到服務(wù)器發(fā)送的響應(yīng)報(bào)文。它讀取響應(yīng)報(bào)文中的狀態(tài)碼和頭信息，并根據(jù)這些信息進(jìn)行相應(yīng)的處理。

(9). 處理響應(yīng)：瀏覽器根據(jù)響應(yīng)報(bào)文中的信息進(jìn)行處理。這可能包括解析響應(yīng)數(shù)據(jù)、執(zhí)行JavaScript代碼、更新頁面內(nèi)容等操作。

(10). 渲染頁面：如果響應(yīng)中包含HTML文檔，瀏覽器會(huì)解析HTML并構(gòu)建DOM樹、CSSOM樹和渲染樹，然后進(jìn)行布局和繪制，最終將頁面內(nèi)容呈現(xiàn)給用戶。

3. 接收HTML文件：

服務(wù)器接收到瀏覽器的請(qǐng)求后，將網(wǎng)頁的HTML文件作為響應(yīng)發(fā)送給瀏覽器。

4. 構(gòu)建DOM樹

瀏覽器開始解析接收到的HTML文件，并構(gòu)建DOM樹。它從HTML的根元素開始，逐步解析和構(gòu)建所有HTML元素及其嵌套關(guān)系。

如何構(gòu)建DOM樹

構(gòu)建DOM樹是將HTML文檔解析并轉(zhuǎn)換為DOM樹的過程。DOM樹表示了HTML文檔的層次結(jié)構(gòu)，每個(gè)HTML元素都在DOM樹中表示為一個(gè)節(jié)點(diǎn)。以下是構(gòu)建DOM樹的詳細(xì)過程：

(1). 標(biāo)記化（Tokenization）：瀏覽器接收到HTML文檔后，首先會(huì)進(jìn)行標(biāo)記化處理。標(biāo)記化將HTML文檔分解為一系列的標(biāo)記（Tokens），包括開始標(biāo)簽、結(jié)束標(biāo)簽、文本內(nèi)容、注釋等。標(biāo)記化器根據(jù)HTML規(guī)范定義的規(guī)則進(jìn)行解析，將文檔分解為標(biāo)記序列。

(2). 構(gòu)建節(jié)點(diǎn)：標(biāo)記化器解析標(biāo)記序列，并根據(jù)標(biāo)記的類型構(gòu)建DOM樹的節(jié)點(diǎn)。開始標(biāo)簽和結(jié)束標(biāo)簽會(huì)被解析為元素節(jié)點(diǎn)（Element Nodes），文本內(nèi)容會(huì)被解析為文本節(jié)點(diǎn)（Text Nodes），注釋會(huì)被解析為注釋節(jié)點(diǎn)（Comment Nodes）等。每個(gè)節(jié)點(diǎn)都包含其在DOM樹中的位置、父節(jié)點(diǎn)、子節(jié)點(diǎn)和相關(guān)的屬性。

(3). 關(guān)聯(lián)節(jié)點(diǎn)：在構(gòu)建節(jié)點(diǎn)的過程中，解析器會(huì)根據(jù)標(biāo)記之間的嵌套關(guān)系來建立節(jié)點(diǎn)之間的關(guān)聯(lián)。例如，遇到一個(gè)開始標(biāo)簽時(shí)，解析器會(huì)將其作為一個(gè)元素節(jié)點(diǎn)，并將其作為上一個(gè)解析的節(jié)點(diǎn)的子節(jié)點(diǎn)。這樣，通過嵌套關(guān)系，整個(gè)DOM樹的結(jié)構(gòu)逐步形成。

(4). 處理樣式和腳本：在構(gòu)建DOM樹的過程中，如果遇到<style>標(biāo)簽或外部的CSS文件，解析器會(huì)將其解析為CSS規(guī)則，并將其應(yīng)用于相應(yīng)的元素節(jié)點(diǎn)。類似地，如果遇到<script>標(biāo)簽或外部的JavaScript文件，解析器會(huì)將其解析為腳本，并執(zhí)行其中的JavaScript代碼。這些操作可以修改DOM樹的結(jié)構(gòu)或?qū)傩浴?/p>

(5). 完成DOM樹：當(dāng)解析器完成對(duì)整個(gè)HTML文檔的解析和節(jié)點(diǎn)構(gòu)建后，就形成了完整的DOM樹。DOM樹反映了HTML文檔的層次結(jié)構(gòu)和標(biāo)記嵌套關(guān)系，每個(gè)節(jié)點(diǎn)代表一個(gè)HTML元素或其他類型的內(nèi)容。

構(gòu)建DOM樹的過程是逐個(gè)解析標(biāo)記并構(gòu)建相應(yīng)節(jié)點(diǎn)的過程，通過嵌套關(guān)系建立節(jié)點(diǎn)之間的父子關(guān)系。DOM樹的構(gòu)建過程為后續(xù)的頁面渲染、樣式應(yīng)用、JavaScript操作等提供了基礎(chǔ)。

5. 請(qǐng)求和解析外部資源

在構(gòu)建DOM樹的過程中，瀏覽器會(huì)遇到外部資源，如CSS文件、JavaScript文件、圖像等。瀏覽器會(huì)發(fā)起額外的網(wǎng)絡(luò)請(qǐng)求來獲取這些資源，并在接收到資源后解析和處理它們。

6. 構(gòu)建CSSOM樹

當(dāng)瀏覽器解析和接收CSS文件時(shí)，它會(huì)構(gòu)建CSSOM樹。CSSOM樹表示CSS樣式規(guī)則的層次結(jié)構(gòu)，包括選擇器、樣式屬性等。

如何構(gòu)建CSSOM樹

構(gòu)建CSSOM樹是將CSS樣式規(guī)則解析并轉(zhuǎn)換為CSSOM樹的過程。CSSOM樹表示CSS規(guī)則的層次結(jié)構(gòu)，包括選擇器、樣式屬性等。以下是構(gòu)建CSSOM樹的詳細(xì)過程：

(1). 解析CSS文件：瀏覽器在解析HTML文檔時(shí)，會(huì)發(fā)現(xiàn)引用的CSS文件，并對(duì)其進(jìn)行解析。瀏覽器會(huì)逐行讀取CSS文件，并將其分解為一系列的CSS規(guī)則。

(2). 構(gòu)建規(guī)則：解析器將每個(gè)CSS規(guī)則解析為一個(gè)規(guī)則對(duì)象。一個(gè)規(guī)則對(duì)象包括一個(gè)選擇器和一個(gè)聲明塊。選擇器指定了應(yīng)用該規(guī)則的元素，聲明塊包含了一組樣式屬性和對(duì)應(yīng)的值。

(3). 構(gòu)建選擇器樹：解析器會(huì)將解析得到的選擇器轉(zhuǎn)換為選擇器樹。選擇器樹是一種表示選擇器之間關(guān)系的樹結(jié)構(gòu)。根據(jù)選擇器的嵌套關(guān)系，解析器會(huì)構(gòu)建選擇器樹來表示選擇器之間的層次結(jié)構(gòu)和嵌套關(guān)系。

(4). 匹配元素：瀏覽器會(huì)遍歷DOM樹中的每個(gè)元素，并根據(jù)元素的標(biāo)簽名、類名、ID等屬性與CSS規(guī)則中的選擇器進(jìn)行匹配。如果元素與選擇器匹配成功，那么該元素將被應(yīng)用相應(yīng)的樣式。

(5). 構(gòu)建樣式規(guī)則：當(dāng)元素與選擇器匹配成功后，瀏覽器會(huì)將匹配的樣式規(guī)則與元素相關(guān)聯(lián)。每個(gè)樣式規(guī)則都包含了一組樣式屬性和對(duì)應(yīng)的值。瀏覽器會(huì)將這些樣式規(guī)則應(yīng)用于匹配的元素。

(6). 構(gòu)建CSSOM樹：在匹配并應(yīng)用所有CSS規(guī)則后，瀏覽器將構(gòu)建得到的樣式規(guī)則以及與之相關(guān)聯(lián)的元素，轉(zhuǎn)換為CSSOM樹。CSSOM樹的結(jié)構(gòu)與DOM樹類似，每個(gè)節(jié)點(diǎn)表示一個(gè)樣式規(guī)則，并包含其對(duì)應(yīng)的樣式屬性和值。

(7). 處理樣式繼承：在CSSOM樹中，一些樣式屬性具有繼承性，即子元素會(huì)繼承父元素的樣式。瀏覽器會(huì)處理樣式繼承，并確保子元素正確繼承父元素的樣式。

(8). 處理層疊樣式：如果多個(gè)CSS規(guī)則應(yīng)用于同一個(gè)元素并定義了相同的樣式屬性，瀏覽器會(huì)根據(jù)層疊規(guī)則（如選擇器的特殊性、樣式規(guī)則的順序等）來決定最終應(yīng)用哪個(gè)樣式。

通過構(gòu)建CSSOM樹，瀏覽器能夠獲取并組織CSS規(guī)則，并將其應(yīng)用于對(duì)應(yīng)的元素。這是實(shí)現(xiàn)

7. 構(gòu)建渲染樹

瀏覽器將DOM樹和CSSOM樹進(jìn)行合并，生成渲染樹。渲染樹中只包含需要顯示的元素和相關(guān)的樣式信息，隱藏的元素不會(huì)被包括在渲染樹中。

構(gòu)建渲染樹過程

構(gòu)建渲染樹是將DOM樹和CSSOM樹合并為一個(gè)渲染樹的過程。渲染樹是瀏覽器用于渲染頁面的關(guān)鍵數(shù)據(jù)結(jié)構(gòu)，它包含了需要顯示的所有元素以及與之相關(guān)的樣式信息。以下是構(gòu)建渲染樹的詳細(xì)過程：

(1). 合并DOM樹和CSSOM樹：瀏覽器將DOM樹和CSSOM樹進(jìn)行合并。這是通過匹配DOM樹中的每個(gè)元素節(jié)點(diǎn)與CSSOM樹中的規(guī)則進(jìn)行匹配來實(shí)現(xiàn)的。只有那些與DOM樹中的元素節(jié)點(diǎn)匹配的CSS規(guī)則才會(huì)被包含在渲染樹中。

(2). 忽略不可見元素：渲染樹只包含需要顯示的元素，對(duì)于那些不可見的元素（如設(shè)置了display: none樣式的元素、被隱藏的元素等），瀏覽器會(huì)將其從渲染樹中移除。

(3). 計(jì)算樣式：渲染樹中的每個(gè)節(jié)點(diǎn)都會(huì)計(jì)算最終的樣式。這是通過繼承和層疊規(guī)則來決定節(jié)點(diǎn)的最終樣式。節(jié)點(diǎn)的樣式計(jì)算包括計(jì)算盒子模型（如寬度、高度、邊距等）以及其他相關(guān)的樣式屬性。

(4). 布局（Layout）：渲染樹的每個(gè)節(jié)點(diǎn)都包含了布局（Layout）信息，用于確定節(jié)點(diǎn)在頁面中的位置和大小。布局過程計(jì)算每個(gè)節(jié)點(diǎn)的幾何屬性，如位置、尺寸、邊距等。布局是渲染樹的一次遍歷過程，確保每個(gè)節(jié)點(diǎn)都按正確的順序布局，從而構(gòu)建頁面的準(zhǔn)確結(jié)構(gòu)。

(5). 繪制（Painting）：布局完成后，渲染樹中的每個(gè)節(jié)點(diǎn)都包含了繪制（Painting）信息，用于繪制節(jié)點(diǎn)在屏幕上的外觀。繪制過程將節(jié)點(diǎn)的樣式屬性轉(zhuǎn)化為像素，并在屏幕上繪制出相應(yīng)的圖像。

(6). 顯示頁面：當(dāng)渲染樹的節(jié)點(diǎn)完成繪制后，瀏覽器將把繪制好的圖像顯示在用戶的屏幕上。這是通過操作系統(tǒng)和圖形庫來完成的。

渲染樹的構(gòu)建過程包括合并DOM樹和CSSOM樹、忽略不可見元素、計(jì)算樣式、布局和繪制等步驟。它是瀏覽器渲染引擎將HTML和CSS轉(zhuǎn)化為可視化頁面的關(guān)鍵過程，確保正確顯示頁面的結(jié)構(gòu)和樣式。

8. 布局（Layout）：

瀏覽器根據(jù)渲染樹的信息進(jìn)行布局，確定每個(gè)元素在頁面中的大小和位置。這包括計(jì)算盒子模型、處理文檔流、計(jì)算元素之間的相對(duì)位置等。

9. 繪制（Painting）：

在布局完成后，瀏覽器根據(jù)渲染樹中的元素和樣式信息進(jìn)行繪制，將頁面上的每個(gè)可見元素繪制出來。

10. 顯示頁面：

瀏覽器將繪制完成的頁面內(nèi)容顯示在用戶的屏幕上，用戶可以看到最終的網(wǎng)頁呈現(xiàn)效果。

總結(jié)

總結(jié)來說，瀏覽器接受URL到頁面呈現(xiàn)的過程包括URL解析、網(wǎng)絡(luò)請(qǐng)求、接收HTML文件、構(gòu)建DOM樹、請(qǐng)求和解析外部資源、構(gòu)建CSSOM樹、構(gòu)建渲染樹、布局、繪制和顯示頁面。這些過程中，DOM樹、CSSOM樹和渲染樹扮演著重要的角色，協(xié)同工作來實(shí)現(xiàn)網(wǎng)頁的渲染和呈現(xiàn)。

標(biāo)簽：