瀏覽器運行原理（一）

這是我參與8月更文挑戰的第3天，活動詳情查看：8月更文挑戰

進程（process）和線程（thread）

進程就像是一個有邊界的生產廠間，而線程就像是廠間內的一個個員工，能夠本身作本身的事情，也能夠相互配合作同一件事情。

當咱們啓動一個應用，計算機會建立一個進程，操做系統會爲進程分配一部份內存，應用的全部狀態都會保存在這塊內存中，應用也許還會建立多個線程來輔助工做，這些線程能夠共享這部份內存中的數據。若是應用關閉，進程會被終結，操做系統會釋放相關內存。更生動的示意圖以下：

一個進程還能夠要求操做系統生成另外一個進程來執行不一樣的任務，系統會爲新的進程分配獨立的內存，兩個進程之間可使用 IPC （Inter Process Communication）進行通訊。不少應用都會採用這樣的設計，若是一個工做進程反應遲鈍，重啓這個進程不會影響應用其它進程的工做。

瀏覽器的多進程架構

有了上面的知識作鋪墊，咱們能夠更合理的討論瀏覽器的架構了，其實若是要開發一個瀏覽器，它能夠是單進程多線程的應用，也能夠是使用 IPC 通訊的多進程應用。

一個好的程序經常被劃分爲幾個相互獨立又彼此配合的模塊，瀏覽器也是如此，以 Chrome 爲例，它由多個進程組成，每一個進程都有本身核心的職責，它們相互配合完成瀏覽器的總體功能，每一個進程中又包含多個線程，一個進程內的多個線程也會協同工做，配合完成所在進程的職責。

不一樣瀏覽器採用了不一樣的架構模式，這裏並不存在標準，本文以 Chrome 爲例進行說明 ：

Chrome 採用多進程架構，其頂層存在一個 Browser process 用以協調瀏覽器的其它進程。

具體說來，Chrome 的主要進程及其職責以下：

• Browser Process：

1. 負責包括地址欄，書籤欄，前進後退按鈕等部分的工做；
2. 負責處理瀏覽器的一些不可見的底層操做，好比網絡請求和文件訪問；

• Renderer Process：

1. 負責一個 tab 內關於網頁呈現的全部事情

• Plugin Process：

1. 負責控制一個網頁用到的全部插件，如 flash

• GPU Process

1. 負責處理 GPU 相關的任務

Chrome 還爲咱們提供了「任務管理器」，供咱們方便的查看當前瀏覽器中運行的全部進程及每一個進程佔用的系統資源，右鍵單擊還能夠查看更多類別信息。

經過「頁面右上角的三個點點點 --- 更多工具 --- 任務管理器」便可打開相關面板，

Chrome 還爲咱們提供了「任務管理器」，供咱們方便的查看當前瀏覽器中運行的全部進程及每一個進程佔用的系統資源，右鍵單擊還能夠查看更多類別信息。

經過「頁面右上角的三個點點點 --- 更多工具 --- 任務管理器」便可打開相關面板，

Chrome 任務管理器面板

Chrome 多進程架構的優缺點

優勢

1. 某一渲染進程出問題不會影響其餘進程
2. 更爲安全，在系統層面上限定了不一樣進程的權限

缺點

因爲不一樣進程間的內存不共享，不一樣進程的內存經常須要包含相同的內容。

爲了節省內存，Chrome 限制了最多的進程數，最大進程數量由設備的內存和 CPU 能力決定，當達到這一限制時，新打開的 Tab 會共用以前同一個站點的渲染進程。（測試了一下在 Chrome 中打開不斷打開知乎首頁，在 Mac i5 8g 上能夠啓動四十多個渲染進程，以後新打開 tab 會合併到已有的渲染進程中。）

Chrome 把瀏覽器不一樣程序的功能看作服務，這些服務能夠方便的分割爲不一樣的進程或者合併爲一個進程。以 Broswer Process 爲例，若是 Chrome 運行在強大的硬件上，它會分割不一樣的服務到不一樣的進程，這樣 Chrome 總體的運行會更加穩定，可是若是 Chrome 運行在資源貧瘠的設備上，這些服務又會合併到同一個進程中運行，這樣能夠節省內存，示意圖以下。

iframe 的渲染 -- Site Isolation

在上面的進程圖中咱們還能夠看到一些進程下還存在着 Subframe，這就是 Site Isolation 機制做用的結果。

Site Isolation 機制從 Chrome 67 開始默認啓用。這種機制容許在同一個 Tab 下的跨站 iframe 使用單獨的進程來渲染，這樣會更爲安全。

Site Isolation 被你們看作里程碑式的功能， 其成功實現是多年工程努力的結果。Site Isolation 不是簡單的疊加多個進程。這種機制在底層改變了 iframe 之間通訊的方法，Chrome 的其它功能都須要作對應的調整，好比說 devtools 須要相應的支持，甚至 Ctrl + F 也須要支持。關於 Site Isolation 的更多內容可參考下述連接

link.zhihu.com/?target=htt…