瀏覽器基礎(chǔ)知識(shí)有哪些

這篇文章主要介紹“瀏覽器基礎(chǔ)知識(shí)有哪些”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“瀏覽器基礎(chǔ)知識(shí)有哪些”文章能幫助大家解決問(wèn)題。

　　瀏覽器的主要功能：

　　是將用戶選擇的web資源呈現(xiàn)出來(lái)，它需要從服務(wù)器請(qǐng)求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是HTML，也包括PDF、image及其他格式。用戶用URI（Uniform Resource Identifier統(tǒng)一資源標(biāo)識(shí)符）來(lái)指定所請(qǐng)求資源的位置。

　　瀏覽器的主要組件包括：

　　1. 用戶界面 —— 包括地址欄、后退/前進(jìn)按鈕、書簽?zāi)夸浀龋簿褪悄闼吹降某擞脕?lái)顯示你所請(qǐng)求頁(yè)面的主窗口之外的其他部分。

　　2. 瀏覽器引擎 —— 用來(lái)查詢及操作渲染引擎的接口。

　　3. 渲染引擎 —— 用來(lái)顯示請(qǐng)求的內(nèi)容，例如，如果請(qǐng)求內(nèi)容為html，它負(fù)責(zé)解析html及css，并將解析后的結(jié)果顯示出來(lái)。

　　4. 網(wǎng)絡(luò) —— 用來(lái)完成網(wǎng)絡(luò)調(diào)用，例如http請(qǐng)求，它具有平臺(tái)無(wú)關(guān)的接口，可以在不同平臺(tái)上工作。

　　5. UI后端 —— 用來(lái)繪制類似組合選擇框及對(duì)話框等基本組件，具有不特定于某個(gè)平臺(tái)的通用接口，底層使用操作系統(tǒng)的用戶接口。

　　6. JS解釋器 —— 用來(lái)解釋執(zhí)行JS代碼。

　　7. 數(shù)據(jù)存儲(chǔ) —— 屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)，HTML5定義了web database技術(shù)，這是一種輕量級(jí)完整的客戶端存儲(chǔ)技術(shù)。

　　老問(wèn)題，大家面試的時(shí)候應(yīng)該都被問(wèn)過(guò)這種問(wèn)題，網(wǎng)上的答案千篇一律，我們來(lái)更深入的了解一下。

　　用戶輸入url，例如其中http為協(xié)議，為網(wǎng)絡(luò)地址，及指出需要的資源在哪臺(tái)計(jì)算機(jī)上。一般網(wǎng)絡(luò)地址可以為域名或IP地址，此處為域名。使用域名是為了方便記憶，一串?dāng)?shù)字哦我們很容易會(huì)記錯(cuò)，但是為了讓計(jì)算機(jī)理解這個(gè)地址還需要把它解析為IP地址。

　　如果訪問(wèn)過(guò)該url，會(huì)先進(jìn)入瀏覽器緩存中查詢是否有要請(qǐng)求的文件（瀏覽器緩存是在本地保存資源副本）。

　　當(dāng)瀏覽器發(fā)現(xiàn)請(qǐng)求的資源已經(jīng)在瀏覽器緩存中存有副本，它會(huì)攔截請(qǐng)求，返回該資源的副本，并直接結(jié)束請(qǐng)求，而不會(huì)再去源服務(wù)器重新下載。如果緩存查找失敗，就會(huì)進(jìn)入網(wǎng)絡(luò)請(qǐng)求過(guò)程了。

　　在network中會(huì)標(biāo)注該請(qǐng)求是在服務(wù)器中請(qǐng)求的還是瀏覽器緩存中的。

　　一條域名的DNS記錄會(huì)在本地有兩種緩存：瀏覽器緩存和操作系統(tǒng)(OS)緩存。

　　1.2.1 瀏覽器緩存 – 瀏覽器會(huì)緩存DNS記錄一段時(shí)間。一般是2分鐘到30分鐘不等。查找瀏覽器緩存時(shí)會(huì)按順序查找: Service Worker-->Memory Cache-->Disk Cache-->Push Cache。

　　Service Worker：

　　是運(yùn)行在瀏覽器背后的獨(dú)立線程，一般可以用來(lái)實(shí)現(xiàn)緩存功能。使用 Service Worker的話，傳輸協(xié)議必須為 HTTPS。因?yàn)?Service Worker 中涉及到請(qǐng)求攔截，所以必須使用 HTTPS 協(xié)議來(lái)保障安全。Service Worker 的緩存與瀏覽器其他內(nèi)建的緩存機(jī)制不同，它可以讓我們自由控制緩存哪些文件、如何匹配緩存、如何讀取緩存，并且緩存是持續(xù)性的。

　　Memory Cache：

　　內(nèi)存中的緩存，主要包含的是當(dāng)前中頁(yè)面中已經(jīng)抓取到的資源，例如頁(yè)面上已經(jīng)下載的樣式、腳本、圖片等。讀取內(nèi)存中的數(shù)據(jù)肯定比磁盤快，內(nèi)存緩存雖然讀取高效，可是緩存持續(xù)性很短，會(huì)隨著進(jìn)程的釋放而釋放。一旦我們關(guān)閉 Tab 頁(yè)面，內(nèi)存中的緩存也就被釋放了。

　　Disk Cache：

　　存儲(chǔ)在硬盤中的緩存，讀取速度慢點(diǎn)，但是什么都能存儲(chǔ)到磁盤中，比之 Memory Cache 勝在容量和存儲(chǔ)時(shí)效性上。

　　在所有瀏覽器緩存中，Disk Cache 覆蓋面基本是最大的。它會(huì)根據(jù) HTTP Herder 中的字段判斷哪些資源需要緩存，哪些資源可以不請(qǐng)求直接使用，哪些資源已經(jīng)過(guò)期需要重新請(qǐng)求。并且即使在跨站點(diǎn)的情況下，相同地址的資源一旦被硬盤緩存下來(lái)，就不會(huì)再次去請(qǐng)求數(shù)據(jù)。絕大部分的緩存都來(lái)自 Disk Cache。

　　Push Cache：

　　Push Cache（推送緩存）是 HTTP/2 中的內(nèi)容，當(dāng)以上三種緩存都沒(méi)有命中時(shí)，它才會(huì)被使用。它只在會(huì)話（Session）中存在，一旦會(huì)話結(jié)束就被釋放，并且緩存時(shí)間也很短暫，在Chrome瀏覽器中只有5分鐘左右，同時(shí)它也并非嚴(yán)格執(zhí)行HTTP頭中的緩存指令。

　　1.2.2系統(tǒng)緩存 – 如果在瀏覽器緩存里沒(méi)有找到需要的記錄，瀏覽器會(huì)做一個(gè)系統(tǒng)調(diào)用獲得系統(tǒng)緩存中的記錄（windows里是gethostbyname）。

　　1.2.3 路由器緩存** – 接著，前面的查詢請(qǐng)求發(fā)向路由器，它一般會(huì)有自己的DNS緩存。

　　1.2.4 ISP DNS 緩存** – 接下來(lái)要check的就是ISP緩存DNS的服務(wù)器。在這一般都能找到相應(yīng)的緩存記錄。

　　1.2.5 遞歸搜索** – 你的ISP的DNS服務(wù)器從跟域名服務(wù)器開(kāi)始進(jìn)行遞歸搜索，從.com頂級(jí)域名服務(wù)器到Facebook的域名服務(wù)器。一般DNS服務(wù)器的緩存中會(huì)有.com域名服務(wù)器中的域名，所以到頂級(jí)服務(wù)器的匹配過(guò)程不是那么必要了。

　　如果沒(méi)有訪問(wèn)過(guò)該url，就會(huì)進(jìn)行DNS域名解析了。

　　IP地址和域名一樣都是用來(lái)做網(wǎng)絡(luò)標(biāo)識(shí)的，域名和 IP 地址是一一對(duì)應(yīng)的映射關(guān)系。

　　DNS：Domain Name System域名系統(tǒng)（基于RFC規(guī)范解釋），是萬(wàn)維網(wǎng)上作為域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫(kù)，能夠使用戶更方便的訪問(wèn)互聯(lián)網(wǎng)，而不用去記住能夠被機(jī)器直接讀取的IP數(shù)串。

　　DNS解析過(guò)程：

　　1.3.1 用戶主機(jī)上運(yùn)行著DNS的客戶端，就是我們的PC機(jī)或者手機(jī)客戶端運(yùn)行著DNS客戶端。

　　1.3.2 瀏覽器將接收到的url中抽取出域名字段，就是訪問(wèn)的主機(jī)名，比如 并將這個(gè)主機(jī)名傳送給DNS應(yīng)用的客戶端.

　　1.3.3 DNS客戶機(jī)端向DNS服務(wù)器端發(fā)送一份查詢報(bào)文，報(bào)文中包含著要訪問(wèn)的主機(jī)名字段（中間包括一些列緩存查詢以及分布式DNS集群的工作）。

　　1.3.4 該DNS客戶機(jī)最終會(huì)收到一份回答報(bào)文，其中包含有該主機(jī)名對(duì)應(yīng)的IP地址。

　　1.3.5 一旦該瀏覽器收到來(lái)自DNS的IP地址，就可以向該IP地址定位的HTTP服務(wù)器發(fā)起TCP連接。

　　可能域名下有多個(gè)端口號(hào)，對(duì)應(yīng)著不同的網(wǎng)絡(luò)功能，所以在DNS解析之后，瀏覽器還會(huì)獲取端口號(hào)。

　　TCP連接，就是耳熟能詳?shù)娜挝帐趾门笥?，四次揮手是路人。

　　TCP連接過(guò)程：

　　1.5.1 服務(wù)端通過(guò)socket，bind和listen準(zhǔn)備好接受外來(lái)的連接，此時(shí)服務(wù)端狀態(tài)為L(zhǎng)isten。

　　1.5.2 客戶端通過(guò)調(diào)用connect來(lái)發(fā)起主動(dòng)連接，導(dǎo)致客戶端TCP發(fā)送一個(gè)SYN（同步）字節(jié)，告訴服務(wù)器客戶將在（待建立的）連接中發(fā)送的數(shù)據(jù)的初始序列號(hào)，客戶端狀態(tài)為SYN_SENT。

　　1.5.3 服務(wù)器確認(rèn)（ACK）客戶的SYN，并自己也發(fā)送一個(gè)SYN，它包含服務(wù)器將在同一連接中發(fā)送數(shù)據(jù)的初始序列號(hào)。

　　1.5.4 客戶端確認(rèn)服務(wù)的ACK和SYN，向服務(wù)器發(fā)送ACK，客戶端狀態(tài)ESTABLISHED。

　　1.5.5 服務(wù)器接收ACK,服務(wù)器狀態(tài)ESABLISHED。

　　既然我們握手成功了，連接到了Web服務(wù)器，瀏覽器會(huì)根據(jù)解析到的IP地址和端口號(hào)發(fā)起HTTP請(qǐng)求。

　　1.6.1 http協(xié)議向服務(wù)器發(fā)送請(qǐng)求，發(fā)送請(qǐng)求的過(guò)程中，瀏覽器會(huì)向Web服務(wù)器以Stream(流)的形式傳輸數(shù)據(jù)，告訴Web服務(wù)器要訪問(wèn)服務(wù)器里面的哪個(gè)Web應(yīng)用下的Web資源。

　　1.6.2 服務(wù)器接收到瀏覽器傳輸?shù)臄?shù)據(jù)后，開(kāi)始解析接收到的數(shù)據(jù)，服務(wù)器解析請(qǐng)求里面的內(nèi)容時(shí)知道客戶端瀏覽器要訪問(wèn)的是應(yīng)用里面的哪這個(gè)Web資源，然后服務(wù)器就去讀取這個(gè)Web資源里面的內(nèi)容，將讀到的內(nèi)容再以Stream(流)的形式傳輸給瀏覽器。

　　TCP連接中止過(guò)程：

　　1.7.1 某端首先調(diào)用close，成為主動(dòng)關(guān)閉端，向另一端發(fā)送FIN分節(jié)，表示數(shù)據(jù)發(fā)送完畢，此時(shí)主動(dòng)關(guān)閉端狀態(tài)FIN_WAIT_1；

　　1.7.2 接收到FIN的是被動(dòng)關(guān)閉端，F(xiàn)IN由TCP確認(rèn)，先向主動(dòng)關(guān)閉端發(fā)送ACK，作為一個(gè)文件結(jié)束符傳遞給接收端應(yīng)用進(jìn)程（放在已排隊(duì)等候該應(yīng)用進(jìn)程接收到的任何其他數(shù)據(jù)之后），因?yàn)镕IN的接收意味著接收端應(yīng)用進(jìn)程在相應(yīng)連接無(wú)額外數(shù)據(jù)可接收，接收端狀態(tài)CLOSE_WAIT；主動(dòng)關(guān)閉端接收到ACK狀態(tài)變?yōu)镕IN_WAIT_2；

　　1.7.3 一段時(shí)間后，接收端接收到這個(gè)文件結(jié)束符的應(yīng)用進(jìn)程調(diào)用close關(guān)閉套接字，向主動(dòng)關(guān)閉端發(fā)送FIN，接收端狀態(tài)為L(zhǎng)AST_ACK；

　　1.7.4 主動(dòng)關(guān)閉端確認(rèn)FIN，狀態(tài)變?yōu)門IME_WAIT，并向接收端發(fā)送ACK，接收端接收到ACK關(guān)閉TCP，而主動(dòng)關(guān)閉端一段時(shí)間后也關(guān)閉TCP；

　　當(dāng)瀏覽器獲得一個(gè)html文件時(shí)，會(huì)自上而下的加載，并在加載過(guò)程中進(jìn)行解析渲染。

　　解析：

　　1. 瀏覽器會(huì)將HTML解析成一個(gè)DOM樹(shù)，DOM 樹(shù)的構(gòu)建過(guò)程是一個(gè)深度遍歷過(guò)程：當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好后才會(huì)去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)。

　　2. 將CSS解析成 CSS Rule Tree 。

　　3. 根據(jù)DOM樹(shù)和CSSOM來(lái)構(gòu)造 Rendering Tree。注意：Rendering Tree 渲染樹(shù)并不等同于 DOM 樹(shù)，因?yàn)橐恍┫?Header 或 display:none 的東西就沒(méi)必要放在渲染樹(shù)中了。

　　4. 有了Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁(yè)中有哪些節(jié)點(diǎn)、各個(gè)節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系。下一步操作稱之為L(zhǎng)ayout，顧名思義就是計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置。

　　再下一步就是繪制，即遍歷render樹(shù)，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)

　　渲染：

　　1. 接收服務(wù)器返回html文件。

　　2. 瀏覽器開(kāi)始載入html代碼，發(fā)現(xiàn)＜head＞標(biāo)簽內(nèi)有一個(gè)＜link＞標(biāo)簽引用外部CSS文件，瀏覽器又發(fā)出CSS文件的請(qǐng)求，服務(wù)器返回這個(gè)CSS文件。

　　3. 瀏覽器繼續(xù)載入html中＜body＞部分的代碼，并且CSS文件已經(jīng)拿到手了，可以開(kāi)始渲染頁(yè)面了。

　　4. 瀏覽器在代碼中發(fā)現(xiàn)一個(gè)＜img＞標(biāo)簽引用了一張圖片，向服務(wù)器發(fā)出請(qǐng)求。此時(shí)瀏覽器不會(huì)等到圖片下載完，而是繼續(xù)渲染后面的代碼。

　　5. 服務(wù)器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器需要回過(guò)頭來(lái)重新渲染這部分代碼。

　　6. 瀏覽器發(fā)現(xiàn)了一個(gè)包含一行Javascript代碼的＜script＞標(biāo)簽，趕快運(yùn)行它。

　　7. Javascript腳本執(zhí)行了這條語(yǔ)句，它命令瀏覽器隱藏掉代碼中的某個(gè)＜div＞ （style.display=”none”）。突然少了這么一個(gè)元素，瀏覽器不得不重新渲染這部分代碼。

　　8. 終于等到了＜/html＞的到來(lái)，瀏覽器淚流滿面。

　　9. 等等，還沒(méi)完，用戶點(diǎn)了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下＜link＞標(biāo)簽的CSS路徑。

　　10. 瀏覽器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞們，“大伙兒收拾收拾行李，咱得重新來(lái)過(guò)……”，瀏覽器向服務(wù)器請(qǐng)求了新的CSS文件，重新渲染頁(yè)面。

關(guān)于“瀏覽器基礎(chǔ)知識(shí)有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。