深刻現代瀏覽器(第一部分)

深刻現代瀏覽器(第一部分)

CPU, GPU, 內存, 和多線程架構

在這四篇博客系列中, 咱們深刻到Chrome瀏覽器內部, 從高級架構到渲染通道的細節, 進行觀察. 若是你曾好奇瀏覽器如何把你的代碼變成網站的功能, 或者你不肯定爲何建議使用特殊的技術來提升性能, 那這個系列就是爲你設計的.

做爲這個系列的第一部門, 咱們將會查看電腦的一些核心感念和Chrome的多線程架構.

計算機核心CPU和GPU

首先咱們要了解瀏覽器的運行環境, 咱們須要理解幾個計算機的核心部分, 以及他們都作了什麼.

CPU

圖1: 4CPU內核, 就像辦公司工做人員坐在每一張桌子錢處理到來的任務.

首先, 是中央處理器(Center Processing Unit), 也就是CPU. CPU被認爲是計算機的大腦. 一個CPU核, 想象成一個官方工做者, 可以處理一個又一個不一樣的任務. 過去大多時候, CPU是一個簡單的芯片. 一個內核就像在同一個芯片中的另外一個CPU. 現代電子產品中, 一般不止一個核心, 給了你手機和筆記本電腦更強大的處理功能.

GPU

圖2: 許多帶着扳手的GPU處理器內核, 代表他們只能處理有限的任務.

圖像處理器(Graphics Processing Unit), 也就是GPU, 是計算機的另外一個部分. 和CPU不一樣, GPU擅長處理一些簡單的任務, 可是能夠同時跨域多個內核. 顧名思義, 起初是爲了處理圖像開發的. 這就是爲何在圖形環境中, 使用GPU, 或者GPU支持, 老是和更快的渲染, 更順暢的交互相關聯. 近幾年, 隨着加速GPU計算, GPU有可能單獨完成愈來愈多的計算.

當你在電腦或者手機打開一個應用, CPU和GPU驅動這個應用. 在通俗的說, 應用程序經過操做系統的機制, 運行在CPU和GPU上.

圖3: 電腦的三層體系結構. 機器硬件層在最底部, 操做系統層在中間, 應用在最上面.

在進程和線程中運行程序

圖4: 進程就好像一個封閉的盒子, 線程就好像抽象的魚在進程中游動

在講解瀏覽器的體系結構以前, 須要認識另外一個概念, 就是進程和線程. 一個應用的運行, 可以被理解爲一個進程. 一個線程存在進程中, 也就是執行程序的某一個部分.

當你運行一個程序的時候, 一個進程就被建立了. 這個程序也許建立了(許多)線程來幫助它工做, 但這是非必須的. 操做系統提供給進程一塊內存空間用來工做, 而且全部的應用都保持在一個各自的內存空間中. 當你關閉這個應用的時候, 這個進程纔會被操做系統從內存中清除.

圖5: 進程使用空間示意圖, 以及如何存儲一個應用.

一個進程可以要求操做系統再運行其餘的進程來運行不一樣的任務. 這樣搞的時候, 內存會給新的進程分配不一樣的空間. 兩個進程之間可使用IPC(Inter Process Communication)進行通訊. 許多應用使用這種設計進行工做, 因此若是一個工做進程再也不響應, 它可以在不中止應用程序在進程上運行的其餘部分, 而從新啓動.

圖6: 不一樣的進程之間經過設計的IPC進行通訊.

瀏覽器設計

因此如今的瀏覽器如何使用進程和線程? 它是使用了一個進程多個線程? 仍是使用了多個進程, 每一個進程又有不少的線程, 進程之間使用IPC通訊呢?

圖7: 不一樣的瀏覽器使用不一樣的進程/線程架構

這裏有一點須要注意, 不一樣的架構是實現細節的不一樣. 如何構建一個瀏覽器, 並無規範. 一個瀏覽器某個方法的實現, 可能和另外一個徹底不一樣.

爲了這個博客系列, 咱們會使用Chrome最近的價格, 正以下圖展現的.

第一張圖表示瀏覽器進程正在協調處理着其餘功能模塊的進程. 對於渲染進程, 每個tab頁都會建立一個渲染進程. 以前, 當一個tab頁準備好的時候, chrome就分配給一個進程. 如今它嘗試給每個網站提供本身的進程, 包括iframes(詳見: Site Isloation)

圖8: 此圖表示Chrome的多進程架構. 渲染進程下展現了多個圖層, 表示Chrome爲每個tab頁運行了多個渲染進程.

各類進程分別控制了什麼

• Browser(瀏覽器進程)
  • 控制瀏覽器的"Chrome"部分, 包括, 地址欄, 書籤, 前進後退按鈕.還處理瀏覽器不可見的特權部分, 包括網絡請求和文件訪問.
• Render(渲染進程)
  • 控制在網站在tab中想要展現的一切
• Plugin(插件)
  • 控制網站中使用的插件, 好比: flash
• GPU
  • 處理其餘進程中被隔離的任務.它被分散到各個進程中, 由於GPUS的處理請求來自各個應用, 並把他們畫到同一個平面上

  圖9: 不一樣的進程指向瀏覽器不一樣的UI部分.

  還有更過的進程, 例如: 擴展進程, 公用進程等. 若是你想看到更多的進程運行在你的Chrome, 點擊有商家的三個點. 選擇, More Tools, 再選擇, Task Manager. 這會打開包括當前運行進程列表的窗口, 而且能夠看到正在使用的CPU/內存等狀況.

Chrome多進程架構的好處

剛剛, 我提到Chrome使用的是多個渲染進程.最簡單的狀況下: 你能夠想象每一個tab頁都有本身的渲染進程. 若是你有三個tab頁打開, 每一個tab頁都獨立運行一個渲染進程. 若其中要給tab頁再也不響應, 而後你能夠關閉這個不響應的tab頁並繼續使用, 保證其餘的tab頁不受影響. 若是全部的tab頁都運行在同一個進程中, 當一個tab頁不響應的時候, 全部的tab頁都不響應了. 那將十分糟糕.

圖10: 演示了每個tab頁中運行了不一樣的進程.

瀏覽器的分離工做方法的另外一個好處就是不一樣的進程是安全和沙箱化. 由於操做系統提供了一種方法限制進程的提權, 因此, 瀏覽器能夠用沙箱的方法保護一些功能上的進程. 舉個例子: Chrome限制了各類處理輸入進程(例如渲染進程)爲所欲爲的文件訪問權.

由於進程有各自的私人內存空間, 他們一般包含公共設施的副本(例如V8是Chrome的JS引擎). 若是他們線程不能在同一個進程中, 互相之間沒有分享的方式, 就會消耗更多的內存空間.爲了節省內存, Chrome對於線程可以掉起多少個線程. 這種限制取決與你設備提供的內存, 和CPU的支持, 但當Chrome達到極限時, 它會在同一個進程中運行多個tab頁.

節省更多的內存, Chrome中的服務

相同的方式應用在瀏覽器的進程中. Chrome正在經歷一個結構的改變. 將瀏覽程序的每個部分做爲一個服務運行, 就能夠輕鬆的分紅不一樣的進程, 或者聚合成一個進程.

普通的想法是: 當Chrome運行在強大的硬件上時, 它的程序會分紅不一樣的服務運行在不一樣的進程中, 以此經過更多的穩定性, 但若是運行在資源受限的設備上, Chrome會把服務放到一個進程中來節省內存空間. 在這種變化以前, 相似的用合併進程來減小內存的使用, 已經在安卓平臺上使用過了.

圖11: 展現了Chrome的服務體系從多個服務分散在多個進程中, 到合併到一個進程中.

每一幀的渲染進程 - 站點隔離(Site Isolation)

Site Isolation是Chrome近期介紹的功能, 可以爲誇站點服務運行不一樣的渲染進程. 咱們正在討論每個tab模型都使用一個渲染進程, 那樣便容許跨站點的iframes運行在同一個渲染進程中, 不一樣的站點就能夠分享內存空間. 運行一個a.com和一個b.com在同一個渲染進程中, 看起來沒問題. 同源策略web的核心安全機制, 它能夠確保一個站點, 在另外一個站點不一樣的狀況下, 不能訪問數據. 繞過此策略是安全攻擊的主要目標. 進程分離, 是分離站點最有效的方式. 發生崩潰和不肯定錯誤的時候Meltdown and Spectre, 咱們須要使用進程來分離站點, 讓其變得更加容易排查. 自從Chrome67之後, 站點分離的技術在桌面上是默認開啓的, 每個在tab中誇站點的iframe, 都會得到一個分離的渲染進程.

圖12: 展現站點分離, 多個渲染進程執行站點內部的iframes.

站點分離技術可以使用通過了多年的努力. 站點分離不是簡單的分配不一樣的渲染進程; 它從根本上改變了iframes之間的通訊方式. 打開一個上面有iframes的頁面的devtools, 這就意味着devtools必須作一些幕後的工做, 讓它看起來很完美無缺. 即便運行了一個簡單的Ctrl+F, 在頁面中查找一個單詞, 也表示須要跨域不一樣的薰染進程進行查找. 如今你能夠看到緣由, 我社麼瀏覽器引擎發佈站點分離的時候, 做爲一個主要的里程碑功能

總結

在這裏, 咱們從更高層次總結了瀏覽器高級架構的, 而後總結了多進程結構的好處. 也總結了Chrome服務和站點分離, 這些與多進程深深相關的功能.在下一篇文章裏, 咱們深刻了解進程和線程都幹了什麼, 來顯示一個網站.