web前端知識點歸納筆記：關於瀏覽器核心的多執行緒機制

摘要： 一、什麼是瀏覽器核心 瀏覽器核心即瀏覽器底層最核心和最基礎的那一部分，它主要負責對網頁當中的 html 、 css 、 JavaScript 進行解釋然後在瀏覽器當中進行渲染最終呈現給使用者，也就是說 核心的工作就是渲染 ，所以我們常常把瀏覽器核心稱為 渲染引擎 （R...

一、什麼是瀏覽器核心

瀏覽器核心即瀏覽器底層最核心和最基礎的那一部分，它主要負責對網頁當中的 html 、 css 、 JavaScript 進行解釋然後在瀏覽器當中進行渲染最終呈現給使用者，也就是說 核心的工作就是渲染 ，所以我們常常把瀏覽器核心稱為 渲染引擎 （Rendering Engine）也稱為 佈局引擎 （Layout Engine）、 排版引擎 。

另外，由於不同瀏覽器的渲染核心不同，對 html 、 css 、 JavaScript 的語法解釋也存在差異（相容問題），因此我們在開發過程中需要在不同核心的瀏覽器當中進行網頁渲染效果的測試。

二、五大瀏覽器四大核心

五大主流瀏覽器分別為：IE,火狐（Firefox）,谷歌(Chrome),Safari,Opera

四大核心分別是：Trident,Webkit,Blink,Gecko

對照表：

瀏覽器	核心
Chrome	Blink
FireFox	Gecko
Safari	Webkit
Opera	Blink
IE	Trident

三、核心是瀏覽器的程序之一

我想說的是： 瀏覽器核心對頁面的渲染，其實就是瀏覽器的渲染程序即Renderer程序。該程序擁有多個執行緒，這些執行緒共同來完成頁面的渲染任務。 那麼都有哪些執行緒呢，如下：

1、瀏覽器GUI（Graphical User Interface-----圖形使用者介面）渲染執行緒

• 負責對瀏覽器介面進行渲染。
• 當重新整理或由於某些操作對介面區域性渲染時，該執行緒會被執行。
• 注意， GUI渲染執行緒 和 JavaScript引擎執行緒 是互斥的（不會同時執行的），即當 JavaScript引擎執行緒 執行時 GUI執行緒 會被凍結，GUI更新需要等到 JavaScript引擎執行緒 空閒時，才會執行。

2、JavaScript引擎執行緒

• 負責解析、執行 JavaScript 指令碼。
• 一個標籤頁（渲染程序）中只會有一個 JavaScript引擎執行緒 執行 JavaScript指令碼 。（JS是單執行緒的）
• 同樣注意，因為 GUI渲染執行緒 與 JavaScript引擎執行緒 是互斥的，所以如果 JS 執行的時間過長，會造成頁面的渲染不連貫，甚至渲染載入阻塞。

3、瀏覽器定時器觸發執行緒（setTimeout、setInterval）

• setTimeout 和 setInterval 所在的執行緒。
• 由於 JavaScript引擎 是單執行緒的，如果處於阻塞執行緒狀態勢必會影響計時的準確性，所以瀏覽器中的定時器並不是由 JavaScript引擎 來計數的。
• 該執行緒只是計時，一旦計時完畢後，會將觸發的指令碼新增到 JavaScript引擎 的處理佇列中，等待 JavaScript引擎 空閒後再執行。
• 注意， W3C 在 HTML標準 中規定，規定要求 setTimeout 中低於 4ms 的時間間隔算為 4ms 。

4、瀏覽器事件觸發執行緒

• JS指令碼 的執行不會影響到 html元素 事件的觸發，由於 JS單執行緒 關係，會將觸發後需要執行的 JS指令碼 新增到 JavaScript引擎 的處理佇列中，當 JavaScript引擎 空閒時才會去執行。
• 注意，該執行緒只是 觸發 ，觸發後要執行的程式碼依然要放到JS引擎執行緒中去執行。

5、瀏覽器http非同步請求執行緒

• 在 XMLHttpRequest 在連線後會通過瀏覽器 新開一個執行緒請求 。
• 當狀態發生變化時，如果之前有設定回撥，會將這個回撥再放入 JavaScript引擎 的處理佇列中，再由JavaScript引擎執行。
  —————END—————
  [公眾號回覆“電子書”，送你經典前端電子書籍]
  喜歡本文的朋友們，歡迎關注微信公眾號 張培躍，收看更多精彩內容