瀏覽器和瀏覽器內(nèi)核

時(shí)間：2023-07-02 22:09:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-02 22:09:01 來源：網(wǎng)站運(yùn)營

瀏覽器和瀏覽器內(nèi)核：

瀏覽器特性

從最初的僅支持簡單功能到如今支持種類繁多的功能和特性，瀏覽器一直在向前發(fā)展，可以預(yù)見，今后瀏覽器的哪些功能呢？力會(huì)越來越強(qiáng)。

那么目前一個(gè)瀏覽器應(yīng)該包括哪些功能呢？

大體上來講，瀏覽器的這些功能包括

網(wǎng)絡(luò)、資源管理、網(wǎng)頁瀏覽、多頁面管理、插件和擴(kuò)展、書簽管理、歷史記錄管理、設(shè)置管理、下載管理、賬戶和同步、安全機(jī)制、隱私管理、外觀卞題、開發(fā)者工具等。下面是對它們之中的一些重要功能的詳細(xì)介紹。

• 網(wǎng)絡(luò)： 它是第一步，瀏覽器通過網(wǎng)絡(luò)模塊來下載各種各樣的資源，例如 HTML 文本、 JavascriPt 代碼、樣式表、圖片、音視頻文件等。網(wǎng)絡(luò)部分其實(shí)非常重要，因?yàn)樗臅r(shí)比較長而且需要安全訪問互聯(lián)網(wǎng)上的資源。
• 資源管理： 從網(wǎng)絡(luò)下載或者本地獲取資源，并將它們管理起來，這需要高效的管理機(jī)制。例如如何避免重復(fù)下載資源、緩存資源等，都是它們需要解決的問題。
• 網(wǎng)頁瀏覽： 這是瀏覽器的核心也是最基本、最重要的功能，它通過網(wǎng)絡(luò)下載資源并從資源管理器獲得資源，將它們轉(zhuǎn)變?yōu)榭梢暬慕Y(jié)果，這也是后面介紹的瀏覽器內(nèi)核最重要的功能。這部分會(huì)分成多個(gè)章節(jié)在后面逐一介紹。
• 多頁面管理： 很多瀏覽器支持多頁面瀏覽，所以需要支持多個(gè)網(wǎng)頁同時(shí)加載，這個(gè)讓瀏覽器變得更復(fù)雜。同時(shí)，如何解決多頁面的相互影響和安全等問題也非常重要，為此，一些瀏覽器做了大量的工作，例如可能會(huì)使用多線程或是進(jìn)程繪制網(wǎng)頁。
• 插件和擴(kuò)展： 這是現(xiàn)代瀏覽器的一個(gè)重要特征，它們不僅能顯示網(wǎng)頁，而且還能支持各種形式的插件和擴(kuò)展。插件是用來顯示網(wǎng)頁特定內(nèi)容的，而擴(kuò)展能增加瀏覽器新功能的軟件或壓縮包，目前常見的插件比如ActiveX插件等，擴(kuò)展則和瀏覽器密切相關(guān)，常見的有FireFox擴(kuò)展和Chromium擴(kuò)展。
• 賬戶和同步： 將瀏覽器的相關(guān)信息，例如歷史信息、書簽等信息同步到服務(wù)器給用戶一個(gè)多個(gè)系統(tǒng)下的統(tǒng)一體驗(yàn)，對用戶非常友好也是瀏覽器易用性的一個(gè)顯著標(biāo)識(shí)。
• 安全機(jī)制： 本質(zhì)是提供一個(gè)安全的瀏覽器環(huán)境，避免給用戶信息被各種非法工具所竊取或破壞，這可能包括了顯示用戶訪問的網(wǎng)站是否安全、為網(wǎng)站設(shè)置安全級別、防止瀏覽器被惡意代碼攻擊等。
• 開發(fā)者工具： 對普通用戶用處不大，但對網(wǎng)頁開發(fā)者來說意義非比尋常，一個(gè)優(yōu)秀的開發(fā)者工具可以幫助審查HTML元素、調(diào)試JavaScript腳本、改善網(wǎng)頁性能等。

還有一個(gè)值得一提的就是瀏覽器的多操作系統(tǒng)支持，包括桌面和移動(dòng)兩個(gè)領(lǐng)域。 讓我們看看目前主流瀏覽器所支持的主流操作系統(tǒng)情況，如表1-1所示。從中我們可以看出，Chrome支持目前所有主流的操作系統(tǒng)，后面依次是Firefbx、Safari和IE。

不過，因?yàn)閕OS的一些特殊限制，使得Chrome雖然發(fā)布了 iOS版，但是其內(nèi)核仍然 不是自身的，還是iOS系統(tǒng)默認(rèn)的。而Firefox和IE則直接沒有iOS版。

代理和瀏覽器行為

用戶代理（ User Agent ）是個(gè)很奇怪的東西，其作用是表明瀏覽器的身份，因而往聯(lián)網(wǎng)的內(nèi)容供應(yīng)商夠知道發(fā)送請求的瀏覽器身份，瀏覽器能夠支持于什么樣的功能

因此瀏覽器發(fā)送不同的網(wǎng)頁內(nèi)容。例如通常Chrome 的桌而版和 Android 版發(fā)送不同的網(wǎng)頁內(nèi)容以適應(yīng)屏幕和操作系統(tǒng)的差或者是因?yàn)椴煌臑g覽器支持的標(biāo)準(zhǔn)不一樣，這樣做的目的當(dāng)然是為了避免瀏覽器不支持的功能以及獲得更好的用戶體驗(yàn)。

比如下面一段代碼

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

內(nèi)核和主流內(nèi)核

在瀏覽器中，有一個(gè)最重要的模塊，它主要的作用就是要頁面轉(zhuǎn)變?yōu)榭梢暬?zhǔn)確上來說還要可聽化）的圖像結(jié)果，這就是瀏覽器內(nèi)核。通常，它也被稱為渲染引擎。

所謂的渲染，就是根據(jù)描述或者定義構(gòu)建數(shù)學(xué)模型，通過模型生成圖像的過程。瀏覽器的渲染引擎就是能夠?qū)?HTML/CSS/JavaScript 文本以及相應(yīng)的資源文件轉(zhuǎn)化成圖像結(jié)果的模塊，如圖1-3所示，這里暫時(shí)把它看成一個(gè)黑盒，其中的細(xì)節(jié)就是本書中的重點(diǎn)。

目前，主流的渲染引擎包括了 Triden，Gecko 和 WebKit，它們分別是 IE，火狐和 Chrome內(nèi)核（2013年，Google 宣布了 Blink 內(nèi)核，它其實(shí)是從 Webkit 復(fù)制出去的），同一個(gè)渲染引擎，雖然可能有很多不同的變化，可以被多個(gè)瀏覽器所采用。

內(nèi)核特征

到目前為止，渲染引擎對我們而言還是一個(gè)黑盒子，黑盒子中包含了什么以及有什么作用，我們還一無所知，本小節(jié)我們來一起探究一下其中的蹊蹺。

根據(jù)渲染引擎所提供的渲染網(wǎng)頁的功能，一般而言，需要包含圖1-4中含的眾多功能模塊，圖中主要分成三層，最上層使用虛線框住的是渲染引擎所提供的功能。

從圖中可以大致看出，一個(gè)渲染引擎主要包括HTML解釋器、CSS 解釋器、布局器和JavaScript引擎等，其它還有繪圖模塊、網(wǎng)絡(luò)等并沒有在圖中直接表示出來，下面一次來描它們。

• HTML 解釋器： 解釋 HTML文本的解釋器 ，主要作用是將 HTML 文本解釋 成DOM （文檔對象模型）樹，DOM是一種文檔的表示方法。
• CSS 解 釋 器 ： 級聯(lián)樣式表的解釋器 ， 它的作用是為 DOM 中的各個(gè)元素對象計(jì)算出樣式信息，從而為計(jì)算最后網(wǎng)頁的布局提供基礎(chǔ)設(shè)施。
• 布局：在 DOM 創(chuàng)建之后，Webkit 需要將其中的元素對象同樣式信息結(jié)合起來，計(jì)算它們的位置等布局信息，形成一個(gè)能夠表示這所有信息的內(nèi)部表示模型。
• JavaScript 引擎：使用 JavaScript 代碼可以修改網(wǎng)頁的內(nèi)容，也能修改 CSS 的信息，JavaScript 引擎能夠解釋 JavaScript 代碼并通過 DOM 接口和 CSSOM 接口來修改網(wǎng)頁內(nèi)容和樣式信息，從而改變渲染的結(jié)果。
• 繪圖：使用圖形庫將布局計(jì)算后的各個(gè)網(wǎng)頁的節(jié)點(diǎn)繪制成圖像結(jié)果。

這些模塊依賴了很多的其它的基礎(chǔ)模塊，這其中包括了網(wǎng)絡(luò)、存儲(chǔ)、2D/3D圖形、音頻視頻和圖片解碼器等。實(shí)際上，渲染引擎中還應(yīng)該包括如何使用這些依賴模塊的部分，這部分的工作其實(shí)并不少，因?yàn)樾枰褂迷O(shè)計(jì)出合適的框架使用它來高效地渲染網(wǎng)頁，后面章節(jié)會(huì)詳細(xì)介紹。例如，利用 2D/3D圖形庫來實(shí)現(xiàn)高性能的網(wǎng)頁繪制和網(wǎng)頁的 3D 渲染，這個(gè)實(shí)現(xiàn)非常復(fù)雜。最后，當(dāng)然在最下層，依然少不了操作系統(tǒng)的支持，例如線程支持、文件支持等。

在了解了這些主要模塊之后，下面介紹這些模塊是如何一起工作以完成網(wǎng)頁的渲染過程。一般的，一個(gè)典型的渲染過程是圍繞如圖所示，這是渲染引擎的核心過程，一切都是圍繞著它來進(jìn)行。

首先是網(wǎng)頁內(nèi)容，輸入到 HTML 解釋器，HTML 解釋器在解釋它后構(gòu)建成一顆 DOM 樹，這期間如果遇到 JavaScript 代碼則交給 JavaScript 引擎去處理；如果網(wǎng)頁中包含 CSS，則交給 CSS 解釋器去解釋。當(dāng) DOM 建立的時(shí)候，渲染引擎接受來自CSS解釋器的樣式信息，構(gòu)建成一個(gè)新的內(nèi)部繪圖模型。該模型由布局模塊計(jì)算計(jì)算模型內(nèi)部各個(gè)元素的位置和大小信息，最后由繪圖模塊完成從該模型到圖像的繪制。

其中的虛線箭頭表示在整個(gè)渲染過程中，每個(gè)階段使用到的其它模塊。在網(wǎng)頁內(nèi)容的下載中，需要使用到網(wǎng)絡(luò)和存儲(chǔ)。比如在計(jì)算布局和繪圖的時(shí)候，需要使用 2D/3D 的圖形模塊，同時(shí)因?yàn)橐勺詈蟮目梢暬Y(jié)果，這時(shí)候就需要開始解碼音頻、視頻和圖片，同其它內(nèi)容一起繪制到最后的圖像中。

在渲染完成之后，用戶可能需要跟渲染的結(jié)果進(jìn)行交互，或者網(wǎng)頁自身有操作，一般而言，這需要持續(xù)的重復(fù)渲染過程。




持續(xù)更新中。。。

參考

《WebKit技術(shù)內(nèi)幕》