2. 程式人生 > >瀏覽器「核心」都做了些什麼？

瀏覽器「核心」都做了些什麼？

阿新 • • 發佈：2018-12-23

前言

四不四經常有人在你面前念(zhūang)叨(bī)，「這是瀏覽器核心的問題！Safari[səˈfɑri]的核心不支援！」？

今天咱們就來聊聊所謂的「核心」！

要講核心首先要講瀏覽器基礎，瀏覽器基礎是前端知識網中的一個小分支，也是前端開發人員必須掌握的基礎知識點。他貫穿著前端的整個網路體系，專案優化也是圍繞著瀏覽器進行的。

一個網址引發的操作

開發人員在面試的時候或許會被問到：

從你在瀏覽器輸入一個網址到網頁內容完全被展示的這段時間內，都發生了什麼事情？ 確實是個老生常談的問題，但問題的答案並不是唯一的，或許在三五年前，這個問題還會有一個「相對」標準的答案。

  1. 瀏覽器在接收到這個指令時，會開啟一個單獨的執行緒來處理這個指令，首先要判斷使用者輸入的是否為合法或合理的 URL 地址，是否為 HTTP 協議請求，如果是那就進入下一步

  2. 瀏覽器的瀏覽器引擎將對此 URL 進行分析，如果存在快取「cache-control」且未過期，則會從本地快取提取檔案（From Memory Cache，200返回碼），如果快取「cache-control」不存在或過期，瀏覽器將發起遠端請求

  3. 通過 DNS 解析域名獲取該網站地址對應的 IP 地址，連同瀏覽器的 Cookie、 userAgent 等資訊向此 IP 發出 GET 請求。

  4. 接下來就是經典的「三次握手」，HTTP 協議會話，瀏覽器客戶端向 Web 伺服器傳送報文，進行通訊和資料傳輸。

  5. 進入網站的後端服務，如 Tomcat、Apache 等，還有近幾年流行的 Node.js 伺服器，這些伺服器上部署著應用程式碼，語言有很多，如 Java、 PHP、 C++、 C# 和 Javascript 等。

  6. 伺服器根據 URL 執行相應的後端應用邏輯，期間會使用到「伺服器快取」或「資料庫」。

  7. 伺服器處理請求並返回響應報文，如果瀏覽器訪問過該頁面，快取上有對應資源，與伺服器最後修改記錄對比，一致則返回 304，否則返回 200 和對應的內容。

  8. 瀏覽器接收到返回資訊並開始下載該 HTML檔案（無快取、200返回碼）或從本地快取提取檔案（有快取、304返回碼）

  9. 瀏覽器的渲染引擎在拿到 HTML 檔案後，便開始解析構建 DOM 樹，並根據 HTML 中的標記請求下載指定的 MIME 型別檔案（如 CSS、 JavaScript 指令碼等），同時使用&設定快取等內容。

  10. 渲染引擎根據 CSS 樣式規則將 DOM 樹擴充為渲染樹，然後進行重排、重繪。

  11. 如果含有 JS 檔案將會執行，進行 Dom 操作、快取讀存、事件繫結等操作。最終頁面將被展示在瀏覽器上。

此答案精簡的概括了「後端為主的 MVC 模式」及早期 Web 應用的瀏覽器響應的全過程。前端技術發展到現在，「前後端分離」「中介軟體直出」和「MNV*模式」也已問世，再談及此問題，答案會有所不同。

就以「前後端分離」為例，在上方答案的第4步後，緊接著就不會直接進入後端伺服器了。而會被 HTTP 和反向代理伺服器，如 Ngnix，攔截。

  • 前置步驟1、2、3、4

  • Ngnix 在監聽到 HTTP（80埠）或 HTTPS（443埠）請求，根據 URL 做服務分發，分發（rewrite）到後端伺服器或靜態資源伺服器，首頁請求基本是分發到靜態伺服器，返回一個 HTML 檔案

  • 步驟7、8、9、10

  • 執行 JS 指令碼，非同步 ajax、 fetch 發起 POST、 GET 請求，重新進入 Ngnix 分發，此次分發到後端伺服器，步驟5、6、7，然後返回一個 xml 或 json 格式的資訊，一般含有 code（返回碼）和 result（依賴資訊）

  • js 回撥根據返回碼執行不同的邏輯，增刪改頁面元素，此時可能會發生重排或重繪。首頁載入結束。

從以上步驟可以發現，瀏覽器可能會觸發兩次重繪，極易產生「白屏」或「頁面抖動」現象，為了解決這個問題「中介軟體直出」的模式應運而生。另外為了擴充大前端的陣營，吸納 IOS 和 Android，Google 設計了「MNV*模式」，典型代表就是 ReactNative，但此模式已經脫離了瀏覽器的範疇，此處就不再做擴充套件。

以上討論的渲染過程中使用到了較多的瀏覽器功能，如使用者位址列輸入框、網路請求、瀏覽器文件解析、渲染引擎渲染網頁、 JavaScript 引擎執行 js 指令碼、客戶端儲存等。 接下來我們介紹下瀏覽器的基本結構組成。

瀏覽器的結構組成

瀏覽器一般由七個模組組成，User Interface（使用者介面）、Browser engine（瀏覽器引擎）、Rendering engine（渲染引擎）、Networking（網路）、JavaScript Interpreter（js直譯器）、UI Backend（UI 後端）、Date Persistence（資料持久化儲存） 如下圖：

0?wx_fmt=png

  • 使用者介面 －包括位址列、後退/前進按鈕、書籤目錄等，也就是你所看到的除了頁面顯示視窗之外的其他部分

  • 瀏覽器引擎 －可以在使用者介面和渲染引擎之間傳送指令或在客戶端本地快取中讀寫資料等，是瀏覽器中各個部分之間相互通訊的核心

  • 渲染引擎 －解析DOM文件和CSS規則並將內容排版到瀏覽器中顯示有樣式的介面，也有人稱之為排版引擎，我們常說的瀏覽器核心主要指的就是渲染引擎

  • 網路 －用來完成網路呼叫或資源下載的模組

  • UI 後端 －用來繪製基本的瀏覽器視窗內控制元件，如輸入框、按鈕、單選按鈕等，根據瀏覽器不同繪製的視覺效果也不同，但功能都是一樣的。

  • JS直譯器 －用來解釋執行JS指令碼的模組，如 V8 引擎、JavaScriptCore

  • 資料儲存 －瀏覽器在硬碟中儲存 cookie、localStorage等各種資料，可通過瀏覽器引擎提供的API進行呼叫

作為前端開發人員，我們需要重點理解渲染引擎的工作原理，靈活應用資料儲存技術，在實際專案開發中會經常涉及到這兩個部分，尤其是在做專案效能優化時，理解瀏覽器渲染引擎的工作原理尤為重要。而其他部分則是由瀏覽器自行管理的，開發者能控制的地方較少。今天我們就圍繞這兩個重點其中的一個部分「瀏覽器渲染引擎」也就是進行展開，「瀏覽器核心」。

瀏覽器渲染引擎

瀏覽器渲染引擎是由各大瀏覽器廠商依照 W3C 標準自行研發的，也被稱之為「瀏覽器核心」。

目前，市面上使用的主流瀏覽器核心有5類：Trident、Gecko、Presto、Webkit、Blink。

Trident：俗稱 IE 核心，也被叫做 MSHTML 引擎，目前在使用的瀏覽器有 IE11 -，以及各種國產多核瀏覽器中的IE相容模組。另外微軟的 Edge 瀏覽器不再使用 MSHTML 引擎，而是使用類全新的引擎 EdgeHTML。

Gecko：俗稱 Firefox 核心，Netscape6 開始採用的核心，後來的 Mozilla FireFox（火狐瀏覽器）也採用了該核心，Gecko 的特點是程式碼完全公開，因此，其可開發程度很高，全世界的程式設計師都可以為其編寫程式碼，增加功能。因為這是個開源核心，因此受到許多人的青睞，Gecko 核心的瀏覽器也很多，這也是 Gecko 核心雖然年輕但市場佔有率能夠迅速提高的重要原因。

Presto：Opera 前核心，為啥說是前核心呢？因為 Opera12.17 以後便擁抱了 Google Chrome 的 Blink 核心，此核心就沒了寄託

Webkit：Safari 核心，也是 Chrome 核心原型，主要是 Safari 瀏覽器在使用的核心，也是特性上表現較好的瀏覽器核心。也被大量使用在移動端瀏覽器上。

Blink： 由 Google 和 Opera Software 開發，在Chrome（28及往後版本）、Opera（15及往後版本）和Yandex瀏覽器中使用。Blink 其實是 Webkit 的一個分支，添加了一些優化的新特性，例如跨程序的 iframe，將 DOM 移入 JavaScript 中來提高 JavaScript 對 DOM 的訪問速度等，目前較多的移動端應用內嵌的瀏覽器核心也漸漸開始採用 Blink。

渲染引擎的工作流程

瀏覽器渲染引擎最重要的工作就是將 HTML 和 CSS 文件解析組合最終渲染到瀏覽器視窗上。如下圖所示，渲染引擎在接受到 HTML 檔案後主要進行了以下操作：解析 HTML 構建 DOM 樹 -> 構建渲染樹 -> 渲染樹佈局 -> 渲染樹繪製。

0?wx_fmt=png

解析 HTML 構建 DOM 樹時渲染引擎會將 HTML 檔案的便籤元素解析成多個 DOM 元素物件節點，並且將這些節點根據父子關係組成一個樹結構。同時 CSS 檔案被解析成 CSS 規則表，然後將每條 CSS 規則按照「從右向左」的方式在 DOM 樹上進行逆向匹配，生成一個具有樣式規則描述的 DOM 渲染樹。接下來就是將渲染樹進行佈局、繪製的過程。首先根據 DOM 渲染樹上的樣式規則，對 DOM 元素進行大小和位置的定位，關鍵屬性如 position;width;margin;padding;top;border;...，接下來再根據元素樣式規則中的 color;background;shadow;...規則進行繪製。

另外，這個過程是逐步完成的，為了更好的使用者體驗，渲染引擎將會盡可能早的將內容呈現到螢幕上，並不會等到所有的 html 都解析完成之後再去構建和佈局 render 樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網路下載其餘內容。

再者，需要注意的是，在瀏覽器渲染完首屏頁面後，如果對 DOM 進行操作會引起瀏覽器引擎對 DOM 渲染樹的重新佈局和重新繪製，我們叫做「重排」和「重繪」，由於重排和重繪是前後依賴的關係，重繪發生時未必會觸發渲染引擎的重排，但是如果發生了重排就必然會觸發重繪操作，這樣帶來的效能損害就是巨大的。因此我們在做效能優化的時候應該遵循「避免重排；減少重繪」的原則。

不同瀏覽器核心間的差異

在不同的瀏覽器核心下， 瀏覽器頁面渲染的流程略有不同

0?wx_fmt=png

0?wx_fmt=png

上面兩幅圖分別是 Webkit 和 Geoko 核心渲染 DOM 的工作流程，對比可以看出，兩者的區別主要在於 CSS 樣式表的解析時機，Webkit 核心下，HTML 和 CSS 檔案的解析是同步的，而 Geoko 核心下，CSS 檔案需要等到 HTML 檔案解析成內容 Sink 後才進行解析。

另外描述術語也有不同，除此之外兩者的流程就基本相同了，其中最重要的三個部分就是 「HTML 的解析」「CSS 的解析」「渲染樹的生成」。這三個部分的原理比較深，會涉及到「詞法分析」「語法分析」「轉換」「解釋」等資料結構的知識，比較枯燥，一般我們瞭解到這裡就夠了，想深入瞭解的同學可以閱讀此篇譯文，瀏覽器的工作原理，裡面詳細的解釋了以上三個部分的流程和原理。此處就不再多做贅述了。

關於 CSS 規則的匹配

上面我們提到過， CSS 規則是按照「從右向左」的方式在 DOM 樹上進行逆向匹配的，最終生成一個具有樣式規則描述的 DOM 渲染樹。

但是你知道為什麼要「從右向左」做逆向匹配嗎？

我們重新回看【webkit 核心工作流程圖】

0?wx_fmt=png

CSS 規則匹配是發生在webkit引擎的「Attachment」過程中，瀏覽器要為每個 DOM Tree 中的元素擴充 CSS 樣式規則（匹配 Style Rules）。對於每個 DOM 元素，必須在所有 Style Rules 中找到符合的 selector 並將對應的規則進行合併。選擇器的「解析」實際是在這裡執行的，在遍歷 DOM Tree 時，從 Style Rules 中去尋找對應的 selector。

我們來舉一個最簡單的栗子：

  1. <template>

  2. <div>

  3. <divclass="t">

  4. <span>test</span>

  5. <p>test</p>

  6. <div>

  7. </div>

  8. </template>

  9. <style>

  10. div{ color:#000; }

  11. div .t span{ color: red;}

  12. div .t p{color: blue;}

  13. </style>

此處我們有一個 html 元素 和一個 style 元素，兩者需要做遍歷匹配

0?wx_fmt=png

此處會有 4*3 個匹配項，如果做正向匹配，在遇到 <span> 標籤匹配 div .t p{color: red;} 到匹配項時，計算機首先要找到 <span> 標籤的父標籤和祖父標籤，判斷他們是否滿足 div .t的規則，然後再匹配 <span>是否為 p標籤，此處匹配不成功，產生了三次浪費。

如果時逆向匹配，那麼第一次對比是否為p標籤便可排除此規則，效率更高。

如果將 HTML 結構變複雜，CSS 規則表變龐大，那麼，「逆向匹配」的優勢就遠大於「正向匹配」了，因為匹配的情況遠遠低於不匹配的情況。另外，如果在選擇器結尾加上萬用字元「*」，那麼「逆向匹配」的優勢就大打折扣了，這也就是很多優化原則提到的「儘量避免在選擇器末尾新增萬用字元」的原因。

極限了想，如果我們的樣式表不存在巢狀關係，如下：

  1. <template>

  2. <divclass="t">

  3. <spanclass="div_t_span">test</span>

  4. <pclass="div_t_p">test</p>

  5. <div>

  6. </template>

  7. <style>

  8. div{ color: #000; }

  9. .div_t_span{ color: red; }

  10. .div_t_p{color: blue; }

  11. </style

那麼引擎的「Attachment」過程將得到極大的精簡，效率也是可想而知的，這就是為什麼「微信小程式」樣式表不建議使用關係行寫法的原因。

相關的效能優化

我們大致可以在以上案例中看到同瀏覽器渲染引擎相關的可行優化點。

大致為以下幾種

減少 JS 載入對 Dom 渲染的影響

將 JS 檔案放在 HTML 文件後加載，或者使用非同步的方式載入 JS 程式碼

避免重排，減少重繪

在做 css 動畫的時候減少使用 width、 margin、 padding 等影響 CSS 佈局對規則，可以使用 CSS3 的 transform 代替。另外值得注意的是，在載入大量的圖片元素時，儘量預先限定圖片的尺寸大小，否則在圖片載入過程中會更新圖片的排版資訊，產生大量的重排。

減少使用關係型樣式表的寫法

直接使用唯一的類名即可最大限度的提升渲染效率，另外儘量避免在選擇器末尾新增萬用字元

減少 DOM 的層級

減少無意義的 dom 層級可以減少 渲染引擎 Attachment 過程中的匹配計算量

作者：zwwill_木羽 

原文：https://segmentfault.com/a/1190000011938697

0?wx_fmt=png

相關推薦

瀏覽器「核心」都做了些什麼？

前言 四不四經常有人在你面前念(zhūang)叨(bī)，「這是瀏覽器核心的問題！Safari[səˈfɑri]的核心不支援！」？ 今天咱們就來聊聊所謂的「核心」！ 要講核心首先要講瀏覽器基礎，瀏覽器基礎是前端知識網中的一個小分支，也是前端開發人員必須掌握的基礎知識點。他貫穿著前端的整個網路體系，

【dotnet跨平臺】&quot;dotnet restore&quot;和&quot;dotnet run&quot;都做了些什麽？

sin end ati article align ade exce font aspnet 【dotnet跨平臺】"dotnet restore"和"dotnet run"都做了些什麽？前言：關於dotnet跨平臺的相關內容。能

從架構演進的角度聊聊spring cloud都做了些什麽？

將不 技術選型 ati 繼續 微服務 公司 發現 dashboard 整合 Spring Cloud作為一套微服務治理的框架，幾乎考慮到了微服務治理的方方面面，之前也寫過一些關於Spring Cloud文章，主要偏重各組件的使用，本次分享主要解答這兩個問題：Spring C

Linux Centos 安裝Nginx和全面瞭解Nginx都做了些什麼

什麼是Nginx Nginx 是一款高效能的 http 伺服器/反向代理伺服器及電子郵件（IMAP/POP3）代理伺服器。由俄羅斯的程式設計師伊戈爾·西索夫（Igor Sysoev）所開發，官方測試 nginx 能夠支支撐 5 萬併發連結，並且 cpu、記憶體等資源消耗卻非常低，執行

黑客講故事：攻下隔壁家妹子路由器後，我都做了些什麼

記憶中隔壁是一個還算不錯的妹子，那天 Z 來找我的時候恰巧碰到了，進屋後跑到我耳邊說：“隔壁那個妹子你能不能要到微信，我覺得挺不錯的呢~” 這麼三俗的場景竟然發生在我的身邊，我說等兩天我給你訊息。 入口 既然是住在隔壁的年輕人，必然不可缺少的就是路由器，於是我打算從路由器當做入口開始這次旅程，將 w

成功的MES項目，前期都做了些什麽？

生產管理 一定的 考核 專家 col 生產成本 img ado 統計分析 為了智能化發展的需要，實現精細化管理，提高生產管理信息化水平、降低生產成本，許多企業開始有選擇的實施應用MES系統，但是，企業如何選擇適合企業發展的MES請添加鏈接描述系統，在選型和實施過程中會遇到哪

新增Intent.FLAG_ACTIVITY_CLEAR_TOP 都做了些什麼

背景 最近老是看到各種面試中的lanchMode和Intent Flag, 大多數分析停留在表面， 並且有些還自相矛盾。lz 最近 做一個需求需要用Intent flag， 查閱了下相關資料， 並從原始碼論證了原因。新增Intent.FLAG_ACTIVITY_CLEA

Spring Cloud都做了些什麽

邏輯 回顧 服務發現 增加 業務需求 進一步 圖形 加強 服務端 Spring Cloud 作為一套微服務治理的框架，幾乎考慮到了微服務治理的方方面面，之前也寫過一些關於 Spring Cloud 的文章，主要偏重各組件的使用。 本次分享主要解答這兩個問題：Spring C

瀏覽器輸入url後都幹了些什麼？

我們在瀏覽器中輸入網址。 瀏覽器查詢域名對應的IP地址 -DNS查詢過程為： -瀏覽器快取->系統快取->路由器快取->ISP DNS快取->遞迴搜尋 -遞迴搜尋過程

Spring Cloud都做了些什麼

Spring Cloud 作為一套微服務治理的框架，幾乎考慮到了微服務治理的方方面面，之前也寫過一些關於 Spring Cloud 的文章，主要偏重各元件的使用。 本次分享主要解答這兩個問題：

看看這些大齡程序員都做了些什麽

lar wall 經驗 asc 階段 加班 mps perl ava 原文：http://zhuanlan.51cto.com/art/201905/596337.htm?utm_source=tuicool&utm_medium=referral 最近的朋友圈不斷被996

使用者在瀏覽器輸入URL回車之後，瀏覽器都做了什麼

在直接列出執行的步驟之前先來普及幾個知識，相信瞭解完這些知識之後會對前後端的互動有更深入的理解。 1、TCP連線 TCP：Transmission Control Protocol， 傳輸控制協議，是一種面向連線的、可靠的、基於位元組流的傳輸層通訊協議。說的這麼專業，有啥用呢？先來舉個栗子吧還記得小時候我

你想了解的「SpringCloud」都在這裡

前言： 之前我們已經瞭解了「什麼是微服務？」，現在我們開始瞭解「微服務」關鍵字下比較熱門的「Spring Cloud」... 一、傳統架構發展史 部分引用自：從架構演進的角度聊聊Spring Cloud都做了些什麼？ - 純潔的微笑 單體架構 單體架構在小微企業比較常見，典型代表就是一個應用、一

今天學習js做了些總結，分享給大家

要求 js文件 優先 encode mas src 全局變量 nan span 一、1.javascript的作用 　　是基於對象和事件驅動的語言，應用於客戶端 基於對象：提供好了很多對象，可以直接拿過來使用,不需要創建 事件驅動: html做網站靜態效果，jav

《機器學習實戰》中的程序清單2-1 k近鄰算法classify0都做了什麽

列表 關鍵字 難解 items 位置 class 做了 ict top k def start(): group,labels = createDataSet() return classify0([3,3], group, l

前端回答從輸入URL到頁面展示都經歷了些什麽

自頂向下 ip） 生成 解析器 shee charset 網絡 結構 som 瀏覽器和服務器涉及大量網絡通信內容，此處做了弱化介紹，作為前端主要關註第四部分。一、 網絡環境保障我們先假定我們訪問的URL為www.abc.com並且地址不在局域網內；首先我們所處的局域網的總路

關於類、方法、對象(實例)：通過一個例子看一下self都做了哪些事情

就會 就是 style 寫代碼 obj 這一 charm self 將不 我們在定義一個類時，經常會在類的各個方法中看到self，那麽在程序執行時self到底起了什麽作用，什麽時候要加self，這一點需要我們思考並好好理解。之前在學習時沒有想這麽多，加之用p

js中的new()到底做了些什麽？？

replace ron title targe 完成 html 概念 data- pseudo 要創建 Person 的新實例，必須使用 new 操作符。以這種方式調用構造函數實際上會經歷以下 4個步驟：(1) 創建一個新對象；(2) 將構造函數的作用域賦給新對象（因此 t

9大Python最常用的數據分析庫，在2018都做了哪些更新？

包括 有用 樣式 代數 scrip 小部件 很快 scipy 圖庫 1. NumPy 一般我們會將科學領域的庫作為清單打頭，NumPy是該領域的主要軟件庫之一。它旨在處理大型的多維數組和矩陣，並提供了很多高級的數學函數和方法，因此可以用它來執行各種操作。 在

【轉載】一個c程序在執行main函數之前和main之後都做了那些事情

loss -- text ould 很多 int win 部分 不知道 轉自：https://bbs.csdn.net/topics/300103318#r_78088969 main函數之前--真正的函數執行入口或開始一種解釋實際上，在可執行文件被加載之後，控制權立即交給