瀏覽器的多進程架構簡介

瀏覽器的進程包括：

• Browser進程（主進程）

  • 前進後退
  • 頁面管理建立銷燬其餘進程
  • 網絡資源的管理下載
  • 將render進程獲得的內存中的bitMap，繪製到用戶界面

• 瀏覽器渲染進程

  • 默認每一個Tab頁面一個進程，互不影響
  • 用於渲染頁面、執行腳本、事件處理
  • 瀏覽器渲染進程包括
  • GUI渲染線程
  • 負責渲染瀏覽器界面，解析HTML、CSS、構建DOM樹和渲染樹，佈局和繪製
  • 界面重排重繪
  • GUI渲染線程與JS線程互斥，當JS引擎線程執行時，GUI線程被掛起，GUI的更新會保存在一個隊列中等JS引擎線程空閒時間當即被執行。
  • 爲何GUI與JS引擎線程互斥
  • JS能夠操做DOM若是在修改元素同時渲染界面（即JS線程和GUI線程同時進行），渲染線程先後得到的數據極可能不一致

• JS引擎線程

  • 負責處理JS腳本（如V8引擎）
  • JS引擎等待任務隊列中任務的到來，
  • 注意JS線程與GUI線程互斥，若是JS執行的時間過長，就會致使頁面渲染不連貫，致使頁面渲染加載阻塞

• 事件觸發線程

  • 歸屬瀏覽器而不是JS引擎，用來控制事件循環
  • 當JS引擎執行代碼塊，如點擊事件，Ajax等會將對應任務添加到事件線程中
  • 當對應的事件被觸發時，該線程會把事件添加到待處理隊列的尾部，等待JS引擎的處理
  • 因爲JS的單線程關係，全部這些待處理事件都要排隊等JS引擎處理

• 定時觸發器線程

  • setInterval，setTimeout所在線程
  • 瀏覽器定時計數器並非JS引擎計數的（由於JS引擎是單線程的若是處於阻塞線程狀態就會影響計數的準確度）
  • 所以經過單獨的線程來計時並觸發定時（即便完畢後，添加到事件隊列的尾部，等JS引擎空閒後再執行）
  • 另外setTimeout中低於4ms，按4ms計算

• 異步請求線程

  • XMLHttpRequest在鏈接創建後經過瀏覽器新開一個線程請求
  • 請求狀態變化時，若是有回調函數，異步請求線程產生狀態變化事件，將事件放入事件隊列，再由JS引擎執行。

• 第三方插件進程

  • 每種插件對應一個進程，僅當使用該插件時纔會建立

• GPU進程

  • 最多一個，用於3D繪製等

JS爲何單線程

• JS的主要用途是與用戶互動和操做DOM

  • 如此若是是多線程會帶來同步問題，好比兩個線程一個在DOM上添加內容，一個刪除了該DOM，會出現衝突

• 爲利用CPU多核的能力，H5中使用Web Worker標準

  • 容許JS建立多個線程
  • 可是子線程徹底受主線程控制，且不能夠操做DOM