瀏覽器的組成結構

(1)呈現引擎:負責解析html/css內容，將解析內容呈現到屏幕上

(2)js引擎:解析和執行js的內容

(3)數據存儲:持久層，瀏覽器在硬碟上保存的數據例如cookie

(4)網路:發送網路請求例如http

(5)用戶界面:地址欄/書籤菜單等

(6)瀏覽器引擎:在用戶界面呈現引擎之間傳送指令

(7)用戶界面後端:繪製基本窗口小部件

一.關於呈現引擎:

呈現引擎將開始解析html文檔，並將各個標記逐個轉化為內容樹上的dom節點，同時會解析外部的css文件以及樣式元素中的樣式數據。html中這些帶有視覺指令的樣式信息將用於創建另一個樹結構:呈現樹(呈現樹包含帶有多個視覺屬性如顏色和尺寸的矩形，這些矩形的排列的順序就是它們將在屏幕上的顯示順序)，呈現樹構建完畢後進入布局處理階段，也就是為每個節點分配一個應出現在屏幕上的確切坐標，然後開始繪製，呈現引擎遍歷呈現樹，呈現引擎會儘力將內容顯示在屏幕上，也就是不必等html文檔解析完後就可以開始構建呈現樹和設置布局

呈現引擎採用單線程，幾乎所有的操作除了網路操作都採用的是單線程，該線程是瀏覽器的主線程，瀏覽器的主線程是事件循環，它是一個無限循環永遠處於接受處理狀態，並等待(事件和繪製事件的發生)，並進行處理

二.關於js引擎

1）js引擎與es：es規定了js的語法規則，而最終的js代碼是要被解釋成為計算機識別的語言，而js引擎就是根據es語法規定來翻譯js語句

2）js引擎與瀏覽器：js引擎是瀏覽器的組成部分，既然是瀏覽器的組成部分也就是說js引擎是由瀏覽器廠商來開發的，所以在js引擎解析js語言的時候也會難免有些差異

3）js語言是單線程的：js腳本用於和用戶直接交互，如果js語言為多線程，兩個線程同時執行dom的添加和刪除操作我們的頁面將該如何渲染呢

4）單線程的缺點：

（1）計算量大時候會影響後面數據的渲染

（2）i/o執行 ajax發送請求網路數據，cpu閑置在js中解決這一問題引入了同步和非同步。同步：在主線程中排隊執行的任務，非同步：很容易想到回調函數，這裡要說清楚哦，非同步並不等於回調函數，非同步這操作是由js引擎幫助我們做的，js引擎將非同步的操作放進任務隊列中，而回調函數的主要作用是幫助我們獲取數據，說白了就是當返回了數據或者結果，那麼回調函數就可以執行了，而非同步通常就是搭配回調幹活(例如Ajax請求),非同步任務不進入主線程，而是先進入任務隊列，只有任務隊列通知主線程某個非同步任務可以執行了，該非同步任務進入主線程執行

5）事件和回調函數

任務隊列是一個事件隊列,i/o完成一項設備任務，就在任務隊列中添加一個事件，表示相關非同步任務可以進入執行棧了，主線程讀取任務隊列，就是讀取裡面的那些事件，任務隊列中的事件，除i/o設備事件以外還有用戶產生的事件比如點擊事件，只要指定過回調函數這些事件發生時就會進入任務隊列等待主線程讀取

回調函數就是那些主線程掛起來的代碼,非同步任務必須指定回調函數，而主線程開始執行一部的任務其實就是在執行我們指定的回調函數

三.關於瀏覽器運行機制

瀏覽器運行機制：

(1)所有同步任務都在主線程執行，形成一個執行棧

(2)主線程之外還存在一個任務隊列，只要非同步任務有了結果，就在任務隊列放置一個事件(比如回調函數)

(3)一旦執行棧中所有同步任務執行完畢，系統就會讀取任務隊列中的事件，該事件結束等待狀態，進入執行棧，開始執行

(4)主線程不斷重複以上步驟,，也就是說任務隊列這個線程是瀏覽器開闢的，瀏覽器將js解析器解析的回調函數扔進任務隊列中，等瀏覽器主線程js解析器解析完同步任務後，瀏覽器將任務隊列中的任務拿回主線程扔給js解析器來繼續執行

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！