浏览器基本工作原理(一)

181 阅读5分钟

本篇文章主要参考

Inside look at modern web browser (part 1) - Chrome Developers

How browsers work (web.dev)

进程与线程的一个简单解释 - 阮一峰的网络日志 (ruanyifeng.com)

CPU(工厂)

  • 计算机的核心是 CPU,它承担了所有的计算任务
  • 单个 CPU 一次只能运行一个任务
  • 其他进程处于非运行状态

四核 CPU 处理任务

四核 CPU 处理任务

类比:

CPU 就像一座工厂,时刻在运行。假定工厂的电力有限,一次只能供给一个车间使用。也就是说,一个车间开工的时候,其他车间都必须停工。

GPU

专为执行图形渲染必须的复杂的数学和几何计算而设计

GPU.webp

Three layers of computer architecture.webp

进程(process)和线程(thread)

当我们启动一个应用,计算机会创建一个进程,操作系统会为进程分配一部分内存,应用的所有状态都会保存在这块内存中,应用也许还会创建多个线程来辅助工作,这些线程可以共享这部分内存中的数据。如果应用关闭,进程会被终结,操作系统会释放相关内存。

内存空间是共享的,每个线程都可以使用这些共享内存

进程(process)和线程(thread).jpg

Diagram of a process using memory space and storing application data.svg

进程(process)(车间)

  • 代表 CPU 所能处理的单个任务。任一时刻,CPU 总是运行一个进程,其他进程处于非运行状态
  • 两个进程之间可以使用 IPC (Inter Process Communication)进行通信

进程间通过 IPC 通信动画

进程就好比工厂的车间

线程(thread)(工人)

  • 一个进程可以包括多个线程
  • 进程的内存空间是共享的,每个线程都可以使用这些共享内存。
  • 一个线程使用某些共享内存时,其他线程必须等它结束

类比:

  • 线程就好比车间里的工人
  • 车间的空间是工人们共享的,比如许多房间是每个工人都可以进出的
  • 可是,每间房间的大小不同,有些房间最多只能容纳一个人,比如厕所。里面有人的时候,其他人就不能进去了

互斥锁 mutex

  • "互斥锁"(Mutual exclusion,缩写 Mutex)
  • 防止多个线程同时读写某一块内存区域
  • 互斥锁是信号量的一种特殊情况(n=1时)

一个防止他人进入的简单方法,就是门口加一把锁。先到的人锁上门,后到的人看到上锁,就在门口排队,等锁打开再进去。

信号量 Semaphore

  • "信号量"(Semaphore)
  • 某些内存区域,只能供给固定数目的线程使用
  • 用来保证多个线程不会互相冲突

还有些房间,可以同时容纳n个人,比如厨房。也就是说,如果人数大于n,多出来的人只能在外面等着。 这时的解决方法,就是在门口挂n把钥匙。进去的人就取一把钥匙,出来时再把钥匙挂回原处。后到的人发现钥匙架空了,就知道必须在门口排队等着了

浏览器的多进程架构

浏览器单进程和多进程架构

Different browser architectures in process.webp

Chrome 浏览器由多个进程组成,每个进程都有自己核心的职责,它们相互配合完成浏览器的整体功能,每个进程中又包含多个线程,一个进程内的多个线程也会协同工作,配合完成所在进程的职责。

服务化 - 节省更多内存

浏览器程序中相同的功能方法,正在将浏览器的每个部分作为一项服务运行,可以轻松拆分为不同进程或聚合成一个进程。

当Chrome在强大的硬件上运行时,它可能会将每个服务拆分为不同的流程,从而提供更高的稳定性,但如果它位于资源约束设备上,Chrome会将服务整合到一个流程中,从而节省内存占用。

Diagram of Chrome’s servicification moving different services into multiple processes and a single browser process.svg

操作系统设计

  • 以多进程形式,允许多个任务同时运行
  • 以多线程形式,允许单个任务分成不同的部分运行
  • 提供协调机制,一方面防止进程之间和线程之间产生冲突,另一方面允许进程之间和线程之间共享资源

优点

  • 防一个页面崩溃影响整个浏览器
  • 安全性和沙箱:操作系统提供了限制进程权限的方法,因此浏览器可以从某些功能中对某些进程进行沙箱处理。如任意访问文件
  • 进程有自己的私有内存空间,可以拥有更多的内存。为了节省内存,Chrome限制了它可以启动的进程数量。限制因设备的内存和CPU功率而异,但当Chrome达到限制时,它会在一个进程中开始从同一站点运行多个选项卡

Inside look at modern web browser.webp

iframe 站点隔离

每个跨网站 iframe 运行单独的渲染器进程

Chrome 的不同进程

Chrome 的不同进程.png

  • Browser Process

    负责包括地址栏,书签栏,前进后退按钮等部分的工作

    负责处理浏览器的一些不可见的底层操作,比如网络请求和文件访问

    • UI thread 控制浏览器上的按钮及输入框;
    • network thread 处理网络请求,从网上获取数据;
    • storage thread 控制文件等的访问;
  • Renderer Process

    负责一个 tab 内关于网页呈现的所有事情

    • 主线程 Main thread
    • 工作线程 Worker thread
    • 排版线程 Compositor thread
    • 光栅线程 Raster thread
  • Plugin Process

    负责控制一个网页用到的所有插件

  • GPU Process

    负责处理 GPU 相关的任务

Chrome 任务管理器和系统的任务管理器进程 ID 是一样的

任务管理器.png