走進瀏覽器的幕後瞧瞧!!!

前言

相信你們接觸前端開發一段時間後,會發現越學習越迷茫,亦或者疑問點愈來愈多。(摸魚摸的累了不如摸摸石頭過過河 --)

舉幾個例子:
你們都知道js是單線程的,可是它爲何是單線程的? 瀏覽器是否是也是單線程？

相信你們看到過很多相關的內容好比:《從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理》《深刻淺出JS引擎》等等這些優秀的博客講解。可是多少對一些細節仍是存有迷惑。甚至是一些非科班的同窗可能看過以後就慢慢遺忘了。。。
其次還有一點就是我的認爲碎片化的知識並不必定能陪伴你走的長久(520快樂!!)更但願的是可以全面的瞭解。這也是本系列博客的一個出發點,讓咱們一塊兒探索瀏覽器幕後的三倆事。

本系列儘量的將術語進行大白話的方式解釋。關於一些術語定義概念問題也會貼出參考連接提供給須要的人。

認知內容

隨我梳理一下瀏覽器到底包含那些東西,以及一直耳熟能詳的模塊裏面到底存在什麼祕密。

瀏覽器是什麼?

瀏覽器是用來檢索、展現以及傳遞Web信息資源的應用程序。注意和SEO(搜索引擎)進行區分。

瀏覽器架構,實現包含哪些模塊

按chrome(準確來講chromium)進行介紹說明 想找圖來貼 可是怕太複雜不太好理解。完事畫個簡單的貼上來。

1. 主進程 主要包含主線程和I/O線程(input/output輸入輸出)。以及一些公共API,資源;負責合成。
2. 子進程 主要包含主線程和其餘線程 好比渲染線程Render。
3. 內核 主要包含WebCore V8 WebKit等等。
4. 第三方庫 主要包含圖形庫(2D,3D) 存儲 音頻視頻等等。

注意: 瀏覽器是多進程多線程架構,後續會對內部實現作一個簡單認知(不會太脫離前端)。

瀏覽器主要組件

ps:圖來源網絡 侵刪請留言。

1. UserInterface 用戶界面 - 包括地址欄、前進/後退按鈕、書籤菜單等。除了瀏覽器主窗口顯示的您請求的頁面外，其餘顯示的各個部分都屬於用戶界面。
2. Browser Engine 瀏覽器引擎 - 在用戶界面和呈現引擎之間傳送指令。
3. Rendering Engine 呈現引擎 - 負責顯示請求的內容。若是請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，並將解析後的內容顯示在屏幕上。
4. Networking 網絡 - 用於網絡調用，好比 HTTP 請求。其接口與平臺無關，併爲全部平臺提供底層實現。
5. UI Backend 用戶界面後端 - 用於繪製基本的窗口小部件，好比組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操做系統的用戶界面方法。
6. JavaScript Interpreter JavaScript 解釋器。用於解析和執行 JavaScript 代碼。
7. Data Storage 數據存儲。這是持久層。瀏覽器須要在硬盤上保存各類數據，例如 Cookie。

瀏覽器內核是什麼?

在瀏覽器中，有一個最重要的模塊，它主要的做用是將頁面轉變成可視化（準確講還要加上可聽化）的圖像結果，這就是瀏覽器內核。一般，它也被稱爲渲染引擎。常見的內核包括:

1. Trident內核 表明瀏覽器Internet Explorer(IE)
2. Gecko內核 表明瀏覽器Mozilla Firefox
3. WebKit內核 表明瀏覽器Safari
4. Blink內核 表明瀏覽器Chrome,備註說明該內核是基於WebKit內核拉取出的分支進行二次開發的(谷歌團隊以爲本身走的步伐更快)
5. 其餘內核

JavaScript(js)引擎

咱們常說的谷歌瀏覽器/nodejs的v8引擎，注意它不是渲染引擎,V8是js引擎,是用來編譯和執行js代碼。

JavaScript引擎是一個專門處理JavaScript腳本的虛擬機，通常會附帶在網頁瀏覽器之中。一般被稱爲js引擎,舉幾個引擎(好幾回問面試者 你知道除了v8以外還有什麼JS引擎嗎?幾乎是全軍覆沒。。):

1. JavaScriptCore 表明瀏覽器Safari
2. Rhino 表明瀏覽器Mozilla Firefox
3. Chakra 表明瀏覽器Internet Explorer(IE)
4. V8 表明瀏覽器 Chrome

後續會展開介紹V8

渲染引擎

ps:圖來源網絡 侵刪請留言。

簡化理解起來就是:

1. 解析HTML構建DOM樹
2. 構造渲染樹
3. 對於渲染樹進行佈局
4. 繪製渲染樹
   值得注意的是在解析過程當中:js代碼可能會修改DOM樹結構。若是解析過程當中依託外部資源會利用加載器進行加載(異步加載)但也會進行等待加載完畢在進行構建DOM樹。

最後

預知後事如何請聽下次分解。

首先呢回顧一下今天 整體來講挺開心,朋友圈社交圈比往年安靜祥和許多。因此決定寫寫文章回報廣大單身貴族和奮戰在一線的大家。

還有答應的系列內容必定會有後續。JS引擎內部 渲染引擎 網絡等等這些必須寫。

最後再次祝你們5,20快樂。但願明天5,21繼續祥和~

"下課!"