瀏覽器基礎知識有哪些

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

　　瀏覽器的主要功能：

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

　　瀏覽器的主要組件包括：

　　1. 用戶界面 —— 包括地址欄、后退/前進按鈕、書簽目錄等，也就是你所看到的除了用來顯示你所請求頁面的主窗口之外的其他部分。

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

　　3. 渲染引擎 —— 用來顯示請求的內容，例如，如果請求內容為html，它負責解析html及css，并將解析后的結果顯示出來。

　　4. 網絡 —— 用來完成網絡調用，例如http請求，它具有平臺無關的接口，可以在不同平臺上工作。

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

　　6. JS解釋器 —— 用來解釋執行JS代碼。

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

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

　　用戶輸入url，例如其中http為協議，為網絡地址，及指出需要的資源在哪臺計算機上。一般網絡地址可以為域名或IP地址，此處為域名。使用域名是為了方便記憶，一串數字哦我們很容易會記錯，但是為了讓計算機理解這個地址還需要把它解析為IP地址。

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

　　當瀏覽器發現請求的資源已經在瀏覽器緩存中存有副本，它會攔截請求，返回該資源的副本，并直接結束請求，而不會再去源服務器重新下載。如果緩存查找失敗，就會進入網絡請求過程了。

　　在network中會標注該請求是在服務器中請求的還是瀏覽器緩存中的。

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

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

　　Service Worker：

　　是運行在瀏覽器背后的獨立線程，一般可以用來實現緩存功能。使用 Service Worker的話，傳輸協議必須為 HTTPS。因為 Service Worker 中涉及到請求攔截，所以必須使用 HTTPS 協議來保障安全。Service Worker 的緩存與瀏覽器其他內建的緩存機制不同，它可以讓我們自由控制緩存哪些文件、如何匹配緩存、如何讀取緩存，并且緩存是持續性的。

　　Memory Cache：

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

　　Disk Cache：

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

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

　　Push Cache：

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

　　1.2.2系統緩存 – 如果在瀏覽器緩存里沒有找到需要的記錄，瀏覽器會做一個系統調用獲得系統緩存中的記錄（windows里是gethostbyname）。

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

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

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

　　如果沒有訪問過該url，就會進行DNS域名解析了。

　　IP地址和域名一樣都是用來做網絡標識的，域名和 IP 地址是一一對應的映射關系。

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

　　DNS解析過程：

　　1.3.1 用戶主機上運行著DNS的客戶端，就是我們的PC機或者手機客戶端運行著DNS客戶端。

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

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

　　1.3.4 該DNS客戶機最終會收到一份回答報文，其中包含有該主機名對應的IP地址。

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

　　可能域名下有多個端口號，對應著不同的網絡功能，所以在DNS解析之后，瀏覽器還會獲取端口號。

　　TCP連接，就是耳熟能詳的三次握手好朋友，四次揮手是路人。

　　TCP連接過程：

　　1.5.1 服務端通過socket，bind和listen準備好接受外來的連接，此時服務端狀態為Listen。

　　1.5.2 客戶端通過調用connect來發起主動連接，導致客戶端TCP發送一個SYN（同步）字節，告訴服務器客戶將在（待建立的）連接中發送的數據的初始序列號，客戶端狀態為SYN_SENT。

　　1.5.3 服務器確認（ACK）客戶的SYN，并自己也發送一個SYN，它包含服務器將在同一連接中發送數據的初始序列號。

　　1.5.4 客戶端確認服務的ACK和SYN，向服務器發送ACK，客戶端狀態ESTABLISHED。

　　1.5.5 服務器接收ACK,服務器狀態ESABLISHED。

　　既然我們握手成功了，連接到了Web服務器，瀏覽器會根據解析到的IP地址和端口號發起HTTP請求。

　　1.6.1 http協議向服務器發送請求，發送請求的過程中，瀏覽器會向Web服務器以Stream(流)的形式傳輸數據，告訴Web服務器要訪問服務器里面的哪個Web應用下的Web資源。

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

　　TCP連接中止過程：

　　1.7.1 某端首先調用close，成為主動關閉端，向另一端發送FIN分節，表示數據發送完畢，此時主動關閉端狀態FIN_WAIT_1；

　　1.7.2 接收到FIN的是被動關閉端，FIN由TCP確認，先向主動關閉端發送ACK，作為一個文件結束符傳遞給接收端應用進程（放在已排隊等候該應用進程接收到的任何其他數據之后），因為FIN的接收意味著接收端應用進程在相應連接無額外數據可接收，接收端狀態CLOSE_WAIT；主動關閉端接收到ACK狀態變為FIN_WAIT_2；

　　1.7.3 一段時間后，接收端接收到這個文件結束符的應用進程調用close關閉套接字，向主動關閉端發送FIN，接收端狀態為LAST_ACK；

　　1.7.4 主動關閉端確認FIN，狀態變為TIME_WAIT，并向接收端發送ACK，接收端接收到ACK關閉TCP，而主動關閉端一段時間后也關閉TCP；

　　當瀏覽器獲得一個html文件時，會自上而下的加載，并在加載過程中進行解析渲染。

　　解析：

　　1. 瀏覽器會將HTML解析成一個DOM樹，DOM 樹的構建過程是一個深度遍歷過程：當前節點的所有子節點都構建好后才會去構建當前節點的下一個兄弟節點。

　　2. 將CSS解析成 CSS Rule Tree 。

　　3. 根據DOM樹和CSSOM來構造 Rendering Tree。注意：Rendering Tree 渲染樹并不等同于 DOM 樹，因為一些像 Header 或 display:none 的東西就沒必要放在渲染樹中了。

　　4. 有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關系。下一步操作稱之為Layout，顧名思義就是計算出每個節點在屏幕中的位置。

　　再下一步就是繪制，即遍歷render樹，并使用UI后端層繪制每個節點

　　渲染：

　　1. 接收服務器返回html文件。

　　2. 瀏覽器開始載入html代碼，發現＜head＞標簽內有一個＜link＞標簽引用外部CSS文件，瀏覽器又發出CSS文件的請求，服務器返回這個CSS文件。

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

　　4. 瀏覽器在代碼中發現一個＜img＞標簽引用了一張圖片，向服務器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染后面的代碼。

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

　　6. 瀏覽器發現了一個包含一行Javascript代碼的＜script＞標簽，趕快運行它。

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

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

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

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

關于“瀏覽器基礎知識有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。