Roger Leung‘s Epcot

vuePress-theme-reco Roger Leung ( z3rog )    2018 - 2021
Roger Leung‘s Epcot

Choose mode

  • dark
  • auto
  • light
Blog
Note
Github (opens new window)
author-avatar

Roger Leung ( z3rog )

18

Article

20

Tag

Blog
Note
Github (opens new window)
  • 首页
  • 框架与工具链

    • Vue 3
    • Vue 2
    • Webpack 4
  • 前端性能优化

    • 性能优化的必要性
    • 性能指标
    • 基本手段
    • 离线缓存
  • 浏览器机制

    • 架构
    • 导航
    • 渲染机制
    • 缓存机制
  • 网络协议

    • TCP 协议
    • HTTP 协议
    • HTTPS 协议
    • HTTP 2 协议
    • HTTP 3 协议
  • 其他

    • V8 中的快慢属性与快慢数组
    • V8 解析执行 JavaScript 流程简述
    • V8 的垃圾回收机制
    • 100 行代码写一个破产版 Vite
    • 浅谈微前端

架构

vuePress-theme-reco Roger Leung ( z3rog )    2018 - 2021

架构

Roger Leung ( z3rog ) 2019-05-03 Chrome

本文主要以 Chrome 为例子讲解现代浏览器的架构.

现代浏览器是多进程多线程的,线程、进程之间的通信依靠 IPC 来实现。其中线程与进程的架构图如下:

browser-architecture

因不同浏览器可能有不同的实现,图中并未涉及过多细节。下面以 Chrome 为例,深入分析。

# Chrome 的多进程架构

chrome-process-arch

浏览器进程负责其余所有进程的调度,让其他进程协调工作。Chrome 会尽可能为每个标签页创建一个进程,若当前进程数过多,Chrome 才会考虑使用同一进程管理同域的标签页。对于渲染进程来说,它需要创建多个进程并且分配给每个标签页。如果一个网站中有 iframe,iframe 也会使用区别于父页面的独立的渲染进程,多个 iframe 使用不同渲染进程。(Chrome 67 出于安全性引入的新机制)。

我们知道,进程是资源分配的最小单位,如果 iframe 使用独立的渲染进程进行渲染,那资源就必定不能共享,换言之,在多个 iframe 下是独立的,如果有同样的资源,会被多次重复加载。

renderer-process-isolation

# 各线程的工作范围

  • 浏览器线程(Browser Process):控制浏览器顶部可交互的部分,比如地址栏、书签、前进后退按钮、浏览器的隐身模式及资源的访问(含网络请求、文件)
  • 渲染进程(Renderer Process):控制标签页内所有用于展示的内容
  • 插件进程(Plugin Process):控制网站使用的插件
  • GPU 进程(GPU Process):独立于其他进程处理 GPU 任务

打开 Chrome 自身的任务管理器可以看到各个进程的明细状况

# 多线程架构优缺点

tabs

优点:

  • 用户体验:因为各个标签页使用独立的渲染进程,当某个标签页无响应时可以直接将其关闭而不影响其他标签页的访问
  • 安全性与沙箱处理:分成多个独立进程意味着进程间使用的内存空间都是独立的,这与同源策略、内容安全策略更加匹配。同时浏览器也可以根据某些功能或特性进行沙箱化处理,限制进程的访问权限

缺点:

  • 占用内存高:对于每一个进程都可能要使用的基础功能,各进程都需要 fork 一份以保留在私有的内存空间中

v8 团队为了优化内存,甚至使用了指针优化,可以参考阅读v8.dev (opens new window)