Inside look at modern web browser(1) -- CPU, GPU, process, thread & 浏览器架构

1,007 阅读5分钟

从CPU和GPU说起——CPU和GPU是一个计算机的核心

  • CPU是计算机的大脑,CPU核心的运行机制就是依次处理交给它的任务;CPU单核能力强大可以处理很广泛的事情;以前的CPU通常就一个核,现在的多是多核
  • GPU单核能力较弱,善于处理简单的工作,但是胜在数量;以前主要任务是处理图像,现在GPU也承担了更多的计算能力
  • 无论是手机上还是电脑上打开一个应用,支撑其运行的是CPU和GPU

Process和Thread上执行程序

⚠️这里使用process和thread,不容易写错;此段非常有利于新手学习,但是建议直接理解原文,所以直接罗列⚠️
  • A process can be described as an application’s executing program. 直接解释了process和application的关系是什么,我认为可以这么翻译,一个process就是一个application的运行实例,有的app支持多开,比如vscode,那么就意味着这个app在同一时间可以有多个运行的process,不支持多开的,比如pc或者mac端的微信,那么同一时间只有一个process在运行。
  • A thread is the one that lives inside of process and executes any part of its process’s program. thread和process关系
  • When you start an application, a process is created. process何时会被创建
  • The Operating System gives the process a "slab" of memory to work with and all application state is kept in that private memory space. When you close the application, the process also goes away and the Operating System frees up the memory. 当一个app被启动的时候,操作系统会为这个app创建一个process,然后给这个process一块私有的内存区域用于存储app data,当关闭app的时候,process结束,memory随之被系统回收
  • A process can ask the Operating System to spin up another process to run different tasks. When this happens, different parts of the memory are allocated for the new process. If two processes need to talk, they can do so by using Inter Process Communication (IPC). Many applications are designed to work this way so that if a worker process get unresponsive, it can be restarted without stopping other processes which are running different parts of the application. process也可以向系统申请再开一个process,进程间通过IPC来通信;很多的程序都这么做,因为一个process不响应了,它可以在不停止其他process的情况下重启

浏览器架构

  • 浏览器有单process架构的的也有多process架构的么,这里以Chrome为例进行讲解,Chrome是多process架构浏览器
  • Chrome“顶部”是浏览器process作为整个浏览器的协调者;一直到最近,一般来说Chrome都尽可能为每个tab提供一个渲染process,现在Chrome尝试着给每个网站一个渲染process 包括iframes
  • Diagram of Chrome’s multi-process architecture. 这个图大概描绘了各种process间以及他们之间的IPC关联

各重要process的控制范围

  • 浏览器process:
    1. 可视部分:地址栏,书签,前进后退键
    2. 不可视部分:网络请求,文件获取
  • 渲染process:浏览器上的网页展示区域
  • 插件process:管理插件
  • GPU process:因为要处理不同app的请求,所以会被分成不同的process
  • 其他process可以通过 settings ➡️ more tools ➡️ Task manager 查看

多进程浏览器的优势

  1. 以tab为例,单个tab的不响应不会影响到其他的tab
  2. 单进程被所锁在沙箱中,提高了安全性,比如浏览器可以限制处理用户输入的进程(比如渲染进程)随意访问文件
  3. ❗️但是事情不总是美好的,因为chrome多进程,并且进程被隔离且有独立的内存,导致不同进程间无法分享一些公用的基础设施,比如v8引擎(chrome的javascript引擎)需要在所有的进程上都有,导致内存的消耗;chrome工程师想到的解决办法是,首先限制chrome可以开启进程的数量上限,且上限是取决于宿主的硬件条件,当达到上限时,chrome会将同一站点的网页放入一个进程中❗️

节省更多内存空间的解决方案——Servicification

  • 这节也就是一些资料谈到的chrome的未来——SOA(Services Oriented Architecture)
  • 简而言之,SOA要达到的目的和上述的第三个优势类似就是,当chrome运行在强大的宿主时,将service单独成进程从而提高稳定性,反之则将可以可以服务化的进程合并入单一进程中,比如原文动画所示,在硬件条件不佳时chrome将网络,设备,存储等等一些process合并进浏览器进程。

逐帧渲染进程——站点隔离

  • 站点隔离是指给跨站点的iframe一个单独的渲染进程。
  • 同源策略作为重要的保证安全的模型不能被忽视,但是如果按照一个tab一个渲染进程的方式会导致安全隐患;
  • 从Chrome 67开始对于每个跨站点的iframe都有独立的渲染进程;
  • 为跨站点iframe分配一个独立的渲染进程看似简单实现,实则非常困难,比如在页面查找,如果当前页面有跨站点的iframe,即当前页面存在多个渲染进程,意味着页面查找操作需要跨进程搜索,其难度可想而至

本节refs:

下一节

Inside look at modern web browser (2) -- 经典问题:从输入URL到网页展示的全部过程