WEB瀏覽器內(nèi)核及渲染原理介紹

瀏覽器內(nèi)核及類型

瀏覽器最重要或者說核心的部分是“Rendering Engine”，可大概譯為“渲染引擎”，不過我們一般習(xí)慣將之稱為“瀏覽器內(nèi)核”。另外，還有一部分是指“js引擎”。一般來說，主要有這兩部分組成瀏覽器內(nèi)核。

  • 渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。

  • JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。

  • 內(nèi)核類型

    • Trident：IE瀏覽器的內(nèi)核，由于在IE中廣泛使用，所以也簡稱IE內(nèi)核咯。不喜歡IE，不介紹了。
    • Gecko：Netscape6開始采用的內(nèi)核，后來的Mozilla FireFox (火狐瀏覽器) 也采用了該內(nèi)核，Gecko的特點 是代碼完全開源。該內(nèi)核的瀏覽器仍然還是Firefox (火狐) 用戶最多， 所以有時也會被稱為** Firefox內(nèi)核 **。此外Gecko也是一個跨平臺內(nèi)核，可以在Windows、 BSD、Linux和Mac OS X 中使用。
    • Presto：目前Opera采用的內(nèi)核，商業(yè)引擎。該內(nèi)核在執(zhí)行Javascrīpt的時候有著最快的速度，根據(jù)在同等條件下的測試，Presto內(nèi)核執(zhí)行同等Javascrīpt所需的時間僅有Trident和Gecko內(nèi)核的約1/3（Trident內(nèi)核最慢，不過兩者相差沒有多大）。
    • Webkit：蘋果公司自己的內(nèi)核，也是蘋果的Safari瀏覽器使用的內(nèi)核。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，符合W3C標(biāo)準(zhǔn)。Safari、Chrome都是該內(nèi)核。在手機上的應(yīng)用也十分廣泛，我感覺現(xiàn)在的智能機無論是Android還是iPhone都是該內(nèi)核吧。所以在開發(fā)移動webapp的時候，只要遵循webkit內(nèi)核標(biāo)準(zhǔn)來，就基本上可以外android和iPhone上完美運行了。至于國內(nèi)的UC和QQ等手機瀏覽器也都是根據(jù)Webkit修改過來的內(nèi)核。我感覺webkit要一統(tǒng)天下了。

渲染引擎

英文叫做：Rendering Engine。顧名思義，就是用來渲染網(wǎng)頁內(nèi)容的，將網(wǎng)頁的內(nèi)容和排版代碼轉(zhuǎn)換為可視的頁面。

JS引擎

通常用來衡量瀏覽器跑分。JavaScript的渲染速度越快，動態(tài)頁面的展示也越快。最快的當(dāng)然后opera瀏覽器了。

  • 常見的集中js引擎：

    • V8：應(yīng)用于Chrome、傲游3。
    • Nitro：應(yīng)用于Safari 4及后續(xù)的版本。
    • Chakra：查克拉，IE9啟用的新的JavaScript引擎。
    • Linear A/Linear B/Futhark/Carakan
      Linear A應(yīng)用于Opera 4.0-6.1版本，Linear B應(yīng)用于Opera 7.0～9.2版本，F(xiàn)uthark應(yīng)用于Opera 9.5-10.2版本，Carakan應(yīng)用于Opera 10.5及后續(xù)的版本。

  • 測試瀏覽器對HTML5標(biāo)準(zhǔn)的支持，分?jǐn)?shù)越高越好：http://www.html5test.com/

瀏覽器渲染原理

  • 瀏覽器加載頁面的過程

    1. 解析HTML以重建DOM樹（Parsing HTML to construct the DOM tree ）：渲染引擎開始解析HTML文檔，轉(zhuǎn)換樹中的標(biāo)簽到DOM節(jié)點，它被稱為“內(nèi)容樹”。
    • 構(gòu)建渲染樹（Render tree construction）：解析CSS（包括外部CSS文件和樣式元素），根據(jù)CSS選擇器計算出節(jié)點的樣式，創(chuàng)建另一個樹 —- 渲染樹。
    • 布局渲染樹（Layout of the render tree）: 從根節(jié)點遞歸調(diào)用，計算每一個元素的大小、位置等，給每個節(jié)點所應(yīng)該出現(xiàn)在屏幕上的精確坐標(biāo)。
    • 繪制渲染樹（Painting the render tree） : 遍歷渲染樹，每個節(jié)點將使用UI后端層來繪制。
      主要的流程就是：構(gòu)建一個dom樹，頁面要顯示的各元素都會創(chuàng)建到這個dom樹當(dāng)中，每當(dāng)一個新元素加入到這個dom樹當(dāng)中，瀏覽器便會通過css引擎查遍css樣式表，找到符合該元素的樣式規(guī)則應(yīng)用到這個元素上。

    舉例：
    1.用戶輸入網(wǎng)址（假設(shè)是個html頁面，并且是第一次訪問），瀏覽器向服務(wù)器發(fā)出請求，服務(wù)器返回html文件； 　　
    2.瀏覽器開始載入html代碼，開始解析標(biāo)簽。發(fā)現(xiàn)<head>標(biāo)簽內(nèi)有一個<link>標(biāo)簽引用外部CSS文件； 　　
    3.瀏覽器又發(fā)出CSS文件的請求，服務(wù)器返回這個CSS文件并下載；
    4.瀏覽器繼續(xù)載入html中<body>部分的代碼，并且CSS文件已經(jīng)拿到手了，可以開始渲染頁面了； 　　
    5.瀏覽器在代碼中發(fā)現(xiàn)一個標(biāo)簽引用了一張圖片，向服務(wù)器發(fā)出請求。此時瀏覽器不會等到圖片下載完，而是繼續(xù)渲染后面的代碼； 　　
    6.服務(wù)器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分代碼； 　　
    7.繼續(xù)下去，瀏覽器發(fā)現(xiàn)了一個包含一行Javascript代碼的<script>標(biāo)簽，立刻運行它； 　　
    8.Javascript腳本執(zhí)行了這條語句，它命令瀏覽器隱藏掉代碼中的某個（style.display=”none”）。由于突然消失了這么一個元素，瀏覽器不得不重新渲染這部分代碼；
    ...............　
    9.解析到等到了</html>的到來，結(jié)束 　　
    10.此時，用戶點了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下<link>標(biāo)簽的CSS路徑；瀏覽器又得從新渲染了，并向服務(wù)器請求了新的CSS文件，重新渲染頁面。

  • reflow：當(dāng)瀏覽器發(fā)現(xiàn)頁面某個部分發(fā)生了點變化影響了布局后，需要倒回去重新渲染，內(nèi)行稱這個回退的過程叫reflow。頻繁的reflow會導(dǎo)致頁面加載非常緩慢，要盡量減少reflow操作。比如樹狀目錄的折疊、展開（實質(zhì)上是元素的顯示與隱藏）等，都將引起瀏覽器的 reflow。鼠標(biāo)滑過、點擊……只要這些行為引起了頁面上某些元素的占位面積、定位方式、邊距等屬性的變化，都會引起它內(nèi)部、周圍甚至整個頁面的重新渲染。

  • repaint：如果只是改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性，將只會引起瀏覽器repaint。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容