5分鐘幫你了解一下谷歌瀏覽器的架構

6
回復
40
查看
打印 上一主題 下一主題
[復制鏈接]

15

主題

15

帖子

254

安幣

手工藝人

樓主
發表于 昨天 09:50 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

在從事前端開發過程中,瀏覽器作為最重要的開發環境,瀏覽器基礎是前端開發人員必須掌握的基礎知識點,它貫穿著前端的整個網絡體系。對瀏覽器原理的了解,也可以提高編寫前端代碼性能的上限。如果你是web前端開發人員那就來一起學習下谷歌瀏覽器的架構知識吧。
谷歌瀏覽器運行的時候會啟動四個主要進程:瀏覽器進程、GPU進程、第三方插件進程及渲染進程。
下面來一一介紹下四個主要進程的作用。
1.瀏覽器進程
Controls "chrome" part of the application including address bar, bookmarks, back and forward buttons. Also handles the invisible, privileged parts of a web browser such as network requests and file access
(控制地址欄、書簽前進后退按鈕,標簽頁創建/銷毀、頁面顯示、網絡請求、資源管理下載)
  • GUI 渲染線程
    • HTML Parser 解析HTML文檔,將元素轉換為樹結構DOM節點
    • CSS Parser 解析Style數據,包括外部的CSS文件以及在HTML元素中的樣式,用于創建渲染樹
    • Layout 為每個節點計算出在屏幕中展示的準確坐標
    • Painting 遍歷渲染樹,調用UI Backend提供的接口繪制每個節點
  • JavaScript 引擎線程
    • 解析Javascript腳本,運行代碼 JS引擎一直等待著任務隊列中任務的到來,然后加以處理,一個Tab頁(renderer進程)中無論什么時候都只有一個JS線程在運行JS程序
    • GUI渲染線程與JS引擎線程互斥
      • 由于JavaScript是可操縱DOM的,如果在修改這些元素屬性同時渲染界面(即JS線程和GUI線程同時運行),那么渲染線程前后獲得的元素數據就可能不一致了。為了防止渲染出現不可預期的結果,瀏覽器設置GUI渲染線程與JS引擎為互斥的關系,當JS引擎執行時GUI線程會被掛起,GUI更新則會被保存在一個隊列中等到JS引擎線程空閑時立即被執行
  • 定時觸發器線程
    • setInterval與setTimeout所在線程
    • 定時計數器并不是由 JavaScript 引擎計數的(因為 JavaScript 引擎是單線程的, 如果處于阻塞線程狀態就會影響記計時的準確, 因此通過單獨線程來計時并觸發定時更為合理)
    • W3C在HTML標準中規定,規定要求setTimeout中低于4ms的時間間隔算為4ms
  • 事件觸發線程
    • 歸屬于瀏覽器而不是JS引擎,用來控制事件循環
    • 一個事件被觸發時該線程會把事件添加到待處理隊列的隊尾,等待 JavaScript 引擎的處理。
    • 這些事件可以是當前執行的代碼塊如定時任務(也可來自瀏覽器內核的其他線程如鼠標點擊、AJAX 異步請求等),會將對應任務添加到事件線程中
    • 由于 JavaScript 的單線程關系所有這些事件都得排隊等待 JavaScript 引擎處理。
  • http 異步請求線程
    • XMLHttpRequest 在連接后是通過瀏覽器新開一個線程請求, 將檢測到狀態變更時,如果設置有回調函數,異步線程就產生狀態變更事件放到 JavaScript 引擎的處理隊列中等待處理
2.GPU進程
Handles GPU tasks in isolation from other processes. It is separated into different process because GPUs handles requests from multiple apps and draw them in the same surface (處理來自其他進程的GPU任務。它被分為不同的進程,因為gpu處理來自多個應用程序的請求,并將它們繪制在同一個表面上)
3.第三方插件進程
Controls any plugins used by the website, for example, flash. 控制網站使用的任何插件,每個插件對應一個進程,當插件運行時創建
4.渲染進程(所說的"瀏覽器內核")
Controls anything inside of the tab where a website is displayed. 控制顯示網站的選項卡內的任何內容,默認每個標簽頁創建一個渲染引擎實例
以上就是谷歌瀏覽器主要進程的相關介紹,當然有一些其他進程,這里不再展開。

分享到:  QQ好友和群 QQ空間 微信
收藏
收藏0
支持
支持0
反對
反對0
沙發
發表于 昨天 09:52 | 只看該作者
感覺樓主很用心,辛苦啦~

4

主題

9729

帖子

791

安幣

代碼手工藝人

Rank: 4

板凳
發表于 昨天 09:52 | 只看該作者
每次我都積極回帖的,想要安幣~

426

主題

1137

帖子

1930

安幣

手工藝人

地板
發表于 昨天 10:03 | 只看該作者
樓主是好人,回個帖會有安幣嗎?

3

主題

9500

帖子

1791

安幣

Android大神

Rank: 6Rank: 6

QQ達人

5#
發表于 昨天 10:16 | 只看該作者
不錯不錯,樓主辛苦了。。。

503

主題

1197

帖子

2030

安幣

手工藝人

6#
發表于 昨天 10:37 | 只看該作者
樓主是好人,回個帖會有安幣嗎?

308

主題

992

帖子

684

安幣

手工藝人

7#
發表于 昨天 11:11 | 只看該作者
樓主威武,以后多發干貨,多辦活動~!
您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規則

領先的中文移動開發者社區
18620764416
7*24全天服務
意見反饋:[email protected]

掃一掃關注我們

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粵ICP備15117877號 )

安卓版28杠游戏