遊覽器的進程和線程

進程和線程的區別

CPU

計算機的核心，其負責承擔計算機的計算任務（能夠比喻爲一個工廠）。

進程

CPU資源分配的最小單位，是能擁有資源和獨立運行的最小單位。（能夠比喻爲工廠車間，是一個工廠任務的環節）任一時刻，CPU老是運行一個進程，其餘進程處於非運行狀態。

線程

CPU調度的最小單位，是創建在進程基礎上的一次程序運行單位，屬於單個的程序執行流，是一個進程中代碼的不一樣執行路線。（能夠比喻爲一個車間的工人組成的一個個任務小組，不一樣的執行流，協同完成一個任務）

總述

一個進程中能夠擁有多個線程，同一進程下的各個線程之間共享程序的內存空間（包括代碼段、數據集、堆等）及一些進程級的資源。雖然不一樣進程之間也能夠通訊，不過代價較大。（能夠在電腦的任務管理器中查看進程）

瀏覽器是多進程的

概述

1. 瀏覽器之因此可以運行，是由於系統給它的進程分配了資源（cpu和內存）。
2. 每打開一個Tab頁，就建立了一個獨立的瀏覽器進程，每一個進程相互獨立。（能夠在Chrome的任務管理器上驗證tab頁進程）

多進程的好處

1. 不會由於一個tab頁崩潰，致使其餘tab頁也被影響。
2. 相對於線程，進程之間是不共享資源和地址空間的，因此也不會存在太多的安全問題。

包含的進程種類

• Browser進程——瀏覽器的主進程，負責協調、主控，只有一個
• 第三方插件進程——每種類型的插件對應一個進程，僅當使用該插件時才建立
• GPU進程——最多一個，用於3D繪製等
• 瀏覽器渲染進程——也就是瀏覽器內核

Browser進程與渲染進程的通訊

1. 若是打開任務管理器，而後打開一個瀏覽器，就能夠看到任務管理器中出現了兩個進程，一個是主控進程，一個則是打開Tab頁的渲染進程
2. 整個過程以下：

1.Browser進程收到用戶請求，首先須要獲取頁面內容，隨後將該任務經過RendererHost接口傳遞給Render進程。
2.Renderer進程的Renderer接口收到消息，簡單解釋後，交給渲染線程，而後開始渲染。
3.渲染線程接收請求，加載網頁並渲染網頁，這其中可能須要Browser進程獲取資源和須要GPU進程來幫助渲染。
4.固然可能會有JS線程操做DOM（這樣可能會形成迴流並重繪）
5.最後Render進程將結果傳遞給Browser進程
6.Browser進程接收到結果並將結果繪製出來

• 如圖所示
  

遊覽器內核是多線程的

常駐線程

• GUI 渲染線程——負責渲染瀏覽器界面，解析HTML，CSS
• JavaScript引擎線程——負責處理Javascript腳本程序
• 定時觸發器線程——處理setInterval與setTimeout任務
• 事件觸發線程——處理事件消息，控制事件循環
• 異步http請求線程——處理XMLHttpRequest異步請求

線程之間的關係

GUI渲染線程與JS引擎線程互斥

1. 因爲js能夠DOM，若是在修改這些元素屬性同時渲染界面（即JavaScript線程和UI線程同時運行），那麼渲染線程先後得到的元素數據就可能不一致了。
2. 所以爲了防止渲染出現不可預期的結果，瀏覽器設置GUI渲染線程與JavaScript引擎爲互斥的關係，當JavaScript引擎執行時GUI線程會被掛起，GUI更新會被保存在一個隊列中等到引擎線程空閒時當即被執行

js爲何會阻塞頁面加載

1. 因爲GUI渲染線程與JavaScript執行線程是互斥的關係，當瀏覽器在執行JavaScript程序的時候，GUI渲染線程會被保存在一個隊列中，直到JS程序執行完成，纔會接着執行。
2. 所以若是JS執行的時間過長，這樣就會形成頁面的渲染不連貫，致使頁面渲染加載阻塞的感受

WebWorker與SharedWorker

• WebWorker——運行在web後臺的線程，至關於js引擎向瀏覽器申請開一個子線程，由瀏覽器所開的，徹底受主線程控制，並且不能操做dom

• SharedWorker——是瀏覽器全部頁面共享的，不能採用與Worker一樣的方式實現，由於它不隸屬於某個Render進程，能夠爲多個Render進程共享使用

• WebWorker與SharedWorker本質上就是進程和線程的區別，SharedWorker由獨立的進程管理，WebWorker只是屬於render進程下的一個線程

參考

• http://www.imweb.io/topic/58e3bfa845e5c13468f567d5
• http://www.cnblogs.com/mininice/p/4298952.html
• http://www.javashuo.com/article/p-ykilsgsq-gs.html