web瀏覽器的工作原理是什么

這篇文章主要介紹“web瀏覽器的工作原理是什么”，在日常操作中，相信很多人在web瀏覽器的工作原理是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”web瀏覽器的工作原理是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

Web 瀏覽器通過向 URL 發(fā)送網(wǎng)絡請求來訪問 Web 服務器資源，并以交互性的方式展示這些內(nèi)容。基本操作包括獲取、處理、顯示和存儲。常見的瀏覽器包括  Internet Explorer、Firefox、谷歌 Chrome、Safari 和 Opera 等。

瀏覽器架構圖

瀏覽器主要由以下幾個部分組成：

1. 用戶界面

2. 瀏覽器引擎

3. 渲染引擎

4. 數(shù)據(jù)存儲層

5. UI BackEnd

6. JavaScript 解析器 (腳本引擎)

7. 網(wǎng)絡層

用戶界面

這是用戶與瀏覽器發(fā)生交互的區(qū)域。瀏覽器的外觀沒有特定的標準，HTML5 規(guī)范沒有規(guī)定 UI  元素該長什么樣，但是列了一些常見元素：地址欄、個人信息欄、滾動條、狀態(tài)欄和工具欄等。

瀏覽器引擎

它提供了 UI 與底層渲染引擎之間的接口，根據(jù)用戶交互進行查詢和操控渲染引擎，提供初始化加載 URL  的方法，并負責重新加載、返回和前進等操作。

渲染引擎

渲染引擎負責在屏幕上顯示網(wǎng)頁內(nèi)容。渲染引擎的主要工作是解析 HTML。渲染引擎默認可展示  HTML、XML和圖片，還可以通過插件或擴展程序支持其他數(shù)據(jù)類型。

渲染引擎工作過程

現(xiàn)代瀏覽器使用不同的渲染引擎：

Gecko：Firefox

Webkit：Safari

Blink：Chrome, Opera (version 15 以上).

可以參考這篇：各種瀏覽器引擎傻傻分不清楚?終于有人說明白了!

web 內(nèi)容渲染過程大致如下：

HTML 數(shù)據(jù)轉成 DOM

來自網(wǎng)絡層的請求內(nèi)容在渲染引擎中接收(通常是 8 kb 的塊)，然后將原始字節(jié)轉換為 HTML  文件中的字符(基于字符編碼)。接著詞法分析器進行詞法分析，將輸入分解為各種標記(token)。在標記化過程中，文件中的每個開始和結束標簽都被記錄下來。它知道如何去掉不相關的字符，比如空格和換行符。

接著，解析器進行語法分析，通過分析文檔結構，應用語言語法規(guī)則構造解析樹。解析過程是迭代進行的。它向詞法分析器請求新的  token，如果匹配語法規(guī)則，token 就被添加到解析樹中。然后再請求另一個 token。如果沒有匹配的規(guī)則，解析器將在內(nèi)部存儲 token，并不斷請求新  token，直到找到匹配所有內(nèi)部存儲 token 的規(guī)則。如果沒有找到規(guī)則，解析器將拋出異常，說明文檔無效，包含語法錯誤。

這些節(jié)點在 DOM(文檔對象模型)樹數(shù)據(jù)結構中互相鏈接，建立父子關系、相鄰兄弟關系。

dom-tree

CSS 數(shù)據(jù)轉成 CSSOM

CSS 數(shù)據(jù)原始字節(jié)被轉換成字符、token、節(jié)點，最終變成 CSSOM(CSS 對象模型)。CSS  的層級特性決定了元素會應用什么樣式。元素的樣式數(shù)據(jù)可以來自父元素(通過繼承)，也可以直接在元素上設置。瀏覽器需要遞歸遍歷 CSS  樹結構來確定特定元素的樣式。

cssom-tree

DOM 與 CSSOM 組成渲染樹

DOM 樹包含了 HTML 元素之間的關系信息，CSSOM 樹則包含了這些元素的樣式信息。從根節(jié)點開始，瀏覽器會遍歷每一個可見節(jié)點。有些節(jié)點是隱藏的(通過  CSS 控制)，不會出現(xiàn)在渲染結果中。對于每個可見節(jié)點，瀏覽器找到 CSSOM 中定義的相關規(guī)則進行匹配，最終這些節(jié)點會帶著內(nèi)容和樣式出現(xiàn)在渲染樹中。

render-tree

布局

接下來進行內(nèi)容布局。內(nèi)容的實際尺寸和位置需要經(jīng)過計算才能渲染到頁面上(瀏覽器視口)。這個過程也叫重排(reflow)。HTML  采用基于流的布局模型，也就是說大部分情況下，幾何位置是一次性計算出來的(內(nèi)容大小或位置發(fā)生變化，需要重新計算)。這個過程是從文檔根元素開始，遞歸完成的。

繪制

通過遍歷每個渲染器，并調用paint方法在屏幕上顯示內(nèi)容。繪制過程可以是全局的(繪制整個樹)，也可以是增量的(渲染樹在屏幕上驗證某個矩形區(qū)域)，操作系統(tǒng)在這些特定節(jié)點上生成繪制事件，整個樹不受影響。繪制是一個漸進的過程，其中一部分在被解析和渲染過后，而該過程將繼續(xù)處理其余部分。

JavaScript 解析器 (JS 引擎)

JavaScript 是一種腳本語言，可動態(tài)更新 Web 內(nèi)容、控制多媒體和動畫等，這些是通過瀏覽器的 JS  引擎完成的。DOM 和 CSSOM 提供了 JS 接口，都可以通過 JS 修改。由于瀏覽器不確定某些 JS 會做什么，因此它會在遇到 script  標簽后會立即暫停構建 DOM 樹。

JS  解析器在接收到服務器發(fā)送來的代碼后，會立即進行解析。代碼被轉換成機器能理解的對象表示形式。保存了所有解析信息的對象叫做抽象語法樹(AST)，這些對象又被解析器轉換成字節(jié)碼。這種編譯方式叫做Just  In Time (JITs) ，也就是 JavaScript  從服務器下載后在客戶端實時編譯。解析器和編譯器是組合使用的，解析器立即處理源代碼，編譯器則生成機器碼，客戶端操作系統(tǒng)可直接運行。

不同瀏覽器的 JS 引擎

Chrome: V8 引擎 (Node JS was built on top of this)

Mozilla: Spider Monkey (以前叫 ‘Squirrel Fish’)

Microsoft Edge: Chakra

Safari: Nitro

UI 后臺

用于繪制基礎控件，比如復選框和窗口等。底層使用操作系統(tǒng)的用戶界面方法，暴露通用的接口，跟平臺無關。

數(shù)據(jù)存儲層

這是持久化層，輔助瀏覽器保存一些數(shù)據(jù)(比如cookies，session storage，indexed DB，Web  SQL，書簽，用戶偏好設置等)。HTML5 規(guī)范提出了瀏覽器端的完整數(shù)據(jù)庫功能。

網(wǎng)絡層

這一層處理瀏覽器的各種網(wǎng)絡通信。瀏覽器使用各種通信協(xié)議獲取網(wǎng)絡資源，比如 HTTP、HTTPs、FTP 等。

瀏覽器用 DNS 解析 URL。這些解析記錄緩存在瀏覽器、操作系統(tǒng)、路由器或者 ISP 中。如果請求的 URL 不在緩存中，ISP 的 DNS  服務器首先發(fā)起 DNS 查詢，找到服務器的 IP 地址。找到正確的 IP 地址后，瀏覽器使用特定的協(xié)議與服務器建立連接。瀏覽器向服務器發(fā)送 SYN  數(shù)據(jù)包，詢問服務器是否打開了 TCP 連接。服務器用 SYN/ACK 數(shù)據(jù)包響應作為前面 SYN 的應答。

瀏覽器接收到應答后，再向服務器發(fā)送 ACK 數(shù)據(jù)包。通過這樣的三次握手就建立了 TCP 連接。一旦建立了連接，就可以傳輸數(shù)據(jù)了。傳輸數(shù)據(jù)過程中必須遵守  HTTP 協(xié)議的相關要求，包括請求和響應的規(guī)則等。

瀏覽器比較

如今市面上有各種不同的瀏覽器，盡管核心功能都是相同的，但是它們之間的區(qū)別也是多方面的。包括平臺(Linux，Windows，Mac，BSD 以及其他  Unix 系統(tǒng))、協(xié)議、用戶界面、HTML5  支持情況、是否開源、所有權等等。

到此，關于“web瀏覽器的工作原理是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>