談及瀏覽器，首先我們的第一映像就是頁面信息顯示或者是從網上百度、谷歌我們所需要的信息。歸納起來大概有兩點：1.信息檢索；2.信息展示
而回顧瀏覽器的發展歷史，從1991年的世界上第一個有用戶注冊的瀏覽器WorldWideWeb開始，當時它還只是可以顯示基本的樣式表，人們可以通過它看見經過簡易排版的頁面信息。它的導航也只有“返回”，“上一步”和“下一步”這三個功能。
經過近30年的時代發展和一代又一代工程師們的努力，期間經歷Erwise、ViolaWWW、MidasWWW、Lynx、Mpsaic、IBM WebExplorer、Netscape Navigator......等，眾多的流浪器，到如今五大主流瀏覽器：IE、Chrome、Firefox、Safari、Opera。

現在的瀏覽器雖然百花齊放，但其內核主要還都是Trident、Webkit、Gecko

列舉了現如今主要的瀏覽器內核，接下來繼續為這個關鍵角色找找歸宿：
1.Trident內核，俗稱是IE內核，它是由微軟在Spyglass Mosaic的基礎上主導開發的，并一直沿用至IE11,從2016年1月開始微軟已停止了對IE的更新，并開始在Windows 10中開始嵌入和推薦
Microsoft Edge瀏覽器，其新一代內核是EdgeHTML；
2.Webkit內核，其前身是KDE小組的KHTML引擎。開始是蘋果的Safari瀏覽器中使用，而后再谷歌的Chrome瀏覽器也采用，并使Webkit更加深入人心，以致于很多人把Webkit稱為chrome內核，（在此為Safari默哀一小會兒）。然而 2013 年 4 月 3 日，谷歌在 Chromium Blog 上發表 博客，稱將與蘋果的開源瀏覽器核心 Webkit 分道揚鑣，在 Chromium 項目中研發 Blink 渲染引擎（即瀏覽器核心），內置于 Chrome 瀏覽器之中。所以現在的谷歌瀏覽器內核其實應該叫Blink,當其本質還是Webkit,我們可以如此理解：Blink是Webkit的分支，而Webkit又是KHTML的分支。在此需要補充說明一點Opera瀏覽器已放棄自己的Presto內核，加入谷歌的陣營，先用Webkit再用Blink。
3.Gecko內核，Gecko的身世就比較傳奇了。它是在Mosaic內核的基礎上開發的。在第一次瀏覽器世紀大戰中，敗下陣來的網景公司并沒有徹底的煙消云散，其原有成員一起創辦了Mozilla基金會，開發了Firefox(火狐)瀏覽器，吹響了第二次瀏覽器大戰的號角。并Gecko內核的代碼完全開源，邀請全世世界的開發者來助陣。這就是一場傳說啊，有木有。

好了，前面背景鋪墊了這么一大堆，下面開始來進入正題：
雖然瀏覽器的種類繁多，內核也多樣，但其主要工作原理卻是大致一致的，這或許就是所謂的“萬法同源”。其工作的簡易原理如下圖：

1.Browser進程，接收資源，展示畫面
2.Render進程繪制畫面
3.GPU進程，輔助繪制畫面

看完簡易版的了，再來看點復雜點的瀏覽器內核工作原理：

一個瀏覽器Tab渲染進程中主要有5個線程，其作用功能如下：
A.GUI渲染線程：graphical user interface
1.負責渲染瀏覽器界面，解析HTML，CSS，構建DOM樹和RenderObject樹，布局和繪制等。
2.當界面需要重繪（Repaint）或由于某種操作引發回流(reflow)時，該線程就會執行
3.注意，GUI渲染線程與JS引擎線程是互斥的，當JS引擎執行時GUI線程會被掛起（相當于被凍結了），GUI更新會被保存在一個隊列中等到JS引擎空閑時立即被執行。

B.js引擎線程（javascript是單線程）：
1.是負責處理JS腳本的js內核，一個渲染進程有且只有一個js線程，且該線程一直處于等待任務對隊列中任務的到來。

C.事件觸發線程：
1.事件觸發線程是用來存放事件任務的隊列，有多個事件任務時觸發時，該線程會按照事件觸發的先后順序將待處理的事件添加到隊列的尾部，排隊等待js引擎線程的處理。

D.定時器觸發的線程：
一次性定時器（setTimeout）和間歇性(setInterval)定時器,為避免js單線程阻塞狀態，影響計時的準確性，故在設計js程序時單獨為計時器開了個線程。計時完成后事件也會被放入事件觸發線程的隊列中等待JS引擎的觸發。
注：setTimeout定時低于4ms的時間會被當做4ms,這是W3C中規定的

E.異步http請求線程：
XMLHttpRequest在連接后是通過瀏覽器新開一個線程請求，當檢測到狀態變更時，如果設置有回掉函數，異步線程就產生狀態變更事件，將這個回調函數放入事件隊列中

轉載于:https://www.cnblogs.com/maoBable/p/8863571.html

總結

以上是生活随笔為你收集整理的JS运行机制（浏览器内核）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。