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

10年積累的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有沙河口免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

瀏覽器的主要功能：

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

瀏覽器的主要組件包括：

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

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

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

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

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

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

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

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

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

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

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

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

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

Memory Cache：

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

Disk Cache：

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

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

Push Cache：

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

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

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

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

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

如果沒有訪問過該url，就會(huì)進(jìn)行DNS域名解析了。

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

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

DNS解析過程：

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

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

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

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

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

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

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

TCP連接過程：

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

1.5.2 客戶端通過調(diào)用connect來發(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請求。

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

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

TCP連接中止過程：

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)連接無額外數(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)為LAST_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ì)自上而下的加載，并在加載過程中進(jìn)行解析渲染。

解析：

1. 瀏覽器會(huì)將HTML解析成一個(gè)DOM樹，DOM 樹的構(gòu)建過程是一個(gè)深度遍歷過程：當(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樹和CSSOM來構(gòu)造 Rendering Tree。注意：Rendering Tree 渲染樹并不等同于 DOM 樹，因?yàn)橐恍┫?Header 或 display:none 的東西就沒必要放在渲染樹中了。

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

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

渲染：

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

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

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

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

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

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

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

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

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

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

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

新聞標(biāo)題：瀏覽器基礎(chǔ)知識(shí)有哪些
轉(zhuǎn)載源于：http://aaarwkj.com/article2/pjsoic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、營銷型網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、電子商務(wù)、搜索引擎優(yōu)化、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)