浏览器进程和线程

进程：当我们启动某个程序时，操作系统会给该程序创建一块内存(当程序关闭时，该内存空间就会被回收)，用来存放代码、运行中的数据和一个执行任务的主线程，这样的一个运行环境就叫进程。进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）

线程:而线程是依附于进程的，在进程中使用多线程并行处理能提升运算效率，进程将任务分成很多细小的任务，再创建多个线程，在里面并行分别执行。线程是cpu调度的最小单位

进程和线程的关系

• 进程与进程之间完全隔离，互不干扰，一个进程崩溃不会影响其他进程，避免一个进程出错影响整个程序
• 进程与进程之间需要传递某些数据的话，就需要通过进程通信管道IPC来传递
• 一个进程中可以并发多个线程，每个线程并行执行不同的任务
• 一个进程中的任意一个线程执行出错，会导致这个进程崩溃
• 同一进程下的线程之间可以直接通信和共享数据
• 当一个进程关闭之后，操作系统会回收该进程的内存空间

浏览器多进程的优势

• 避免单个page crash影响整个浏览器
• 避免第三方插件crash影响整个浏览器
• 多进程充分利用多核优势
• 方便使用沙盒模型隔离插件等进程，提高浏览器安全性

Chrome 进程

• 理论上每打开一个Tab页，就相当于创建了一个独立的浏览器进程。
  • 浏览器应该有自己的优化机制，有时候打开多个tab页后，可以在Chrome任务管理器中看到，有些进程被合并了

浏览器从关闭到启动，然后新开一个页面至少需要：1个浏览器进程，1个GPU进程，1个网络进程，和1个渲染进程，多个插件进程

后续如果再打开新的标签页：浏览器进程，GPU进程，网络进程是共享的，不会重新启动，然后默认情况下会为每一个标签页配置一个渲染进程，但是也有例外，比如从A页面里面打开一个新的页面B页面，而A页面和B页面又属于同一站点的话，A和B就共用一个渲染进程，其他情况就为B创建一个新的渲染进程

• 浏览器（browser）进程： 负责控制浏览器除标签页外的界面，包括地址栏、书签、前进后退按钮等，以及负责与其他进程的协调工作，同时提供存储功能
  • 负责各个页面的管理，创建和销毁其他进程
  • 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
  • 对应的多线程：
    • UI 线程：绘制浏览器的按钮和输入字段
    • 存储线程：控制对文件的访问
• GPU进程：负责整个浏览器界面的渲染。Chrome刚开始发布的时候是没有GPU进程的，而使用GPU的初衷是为了实现3D CSS效果，只是后面网页、Chrome的UI界面都用GPU来绘制，这使GPU成为浏览器普遍的需求，最后Chrome在多进程架构上也引入了GPU进程
• 网络进程：负责发起和接受网络请求，以前是作为模块运行在浏览器进程里面的，后面才独立出来，成为一个单独的进程
• 插件进程：主要是负责插件的运行，因为插件可能崩溃，所以需要通过插件进程来隔离，以保证插件崩溃也不会对浏览器和页面造成影响
• 渲染进程（Renderer进程/浏览器内核，内部是多线程的）：负责控制显示tab标签页内的所有内容，核心任务是将HTML、CSS、JS转为用户可以与之交互的网页，排版引擎Blink和JS引擎V8都是运行在该进程中，默认情况下Chrome会为每个Tab标签页创建一个渲染进程

面向服务的架构

• 在 2016 年，Chrome 官方团队使用“面向服务的架构”（Services Oriented Architecture，简称 SOA）的思想设计了新的 Chrome 架构
• Chrome 最终要把 UI、数据库、文件、设备、网络等模块重构为基础服务，类似操作系统底层服务
  

渲染进程中的线程

• GUI渲染线程：负责渲染页面，解析html和CSS、构建DOM树、CSSOM树、渲染树、和绘制页面，重绘重排也是在该线程执行
  • GUI更新则会被保存在一个队列中等到JS引擎线程空闲时立即被执行
• JS引擎线程：一个tab页中只有一个JS引擎线程(单线程)，负责解析和执行JS。它GUI渲染线程不能同时执行，只能一个一个来，如果JS执行过长就会导致阻塞掉帧
  • 如果在修改这些元素属性同时渲染界面（即JS线程和UI线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了
• 计时器线程：指setInterval和setTimeout，因为JS引擎是单线程的，所以如果处于阻塞状态，那么计时器就会不准了，所以需要单独的线程来负责计时器工作。当计时结束后，将回调放入事件触发线程中。
• 异步http请求线程： XMLHttpRequest连接后浏览器开的一个线程，比如请求有回调函数，当http状态变化，将回调放入事件触发线程中
• worker线程：JS线程向浏览器申请获得的子线程，可独立运行JS（但不能访问DOM）
• 事件触发线程：主要用来控制事件循环，比如JS执行遇到计时器，AJAX异步请求等，等异步事件有了结果，便把他们的回调操作添加到事件队列，把事件添加到待处理队列的队尾，等JS引擎处理
  • 事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件（event-loop）。

浏览器渲染页面

• 一个http请求要经历的状态
  

• Browser进程发出URL请求给网络进程

• 网络进程接收到URL请求后，发起网络请求，然后服务器返回HTTP数据到网络进程，网络进程解析HTTP响应头数据，并将其转发给Browser进程

• Browser进程接收到网络进程的响应头数据后，会发出“提交文档”的消息给渲染进程，发送CommitNavigation消息到渲染进程，发送CommitNavigation时会携带响应头等基本信息

  • 渲染线程接收请求，会和网络进程建立传输数据的“管道”，文档数据传输完成后，渲染进程会返回“确认提交”的消息给Browser进程，这其中需要Browser进程获取资源和需要GPU进程来帮助渲染
  • 浏览器收到“确认提交”的消息后，会更新浏览器的页面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新web页面，此时的web页面是空白页

• Browser进程接收到结果并将结果绘制出来，渲染进程对文档进行页面解析和子资源加载

• 解析html建立dom树

• 解析css构建render树（将CSS代码解析成树形的数据结构，然后结合DOM合并成render树）

  • css加载不会阻塞DOM树解析，但会阻塞render树渲染（渲染时需等css加载完毕，因为render树需要css信息）

• 布局render树（Layout/reflow），负责各元素尺寸、位置的计算

• 绘制render树（paint），绘制页面像素信息

• 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上
  

进程间通信

• 管道通信：就是操作系统在内核中开辟一段缓冲区，进程1可以将需要交互的数据拷贝到这个缓冲区里，进程2就可以读取了
• 消息队列通信：消息队列就是用户可以添加和读取消息的列表，消息队列里提供了一种从一个进程向另一个进程发送数据块的方法，不过和管道通信一样每个数据块有最大长度限制
• 共享内存通信：就是映射一段能被其他进程访问的内存，由一个进程创建，但多个进程都可以访问，共享进程最快的是IPC方式
• 信号量通信：比如信号量初始值是1，进程1来访问一块内存的时候，就把信号量设为0，然后进程2也来访问的时候看到信号量为0，就知道有其他进程在访问了，就不访问了
• socket：其他的都是同一台主机之间的进程通信，而在不同主机的进程通信就要用到socket的通信方式了，比如发起http请求，服务器返回数据

多标签之间怎么通信

类似中介者进行消息的转发和接收，比如

• localStorage：在一个标签页监听localStorage的变化，然后当另一个标签页修改的时候，可以通过监听获取新数据
• WebSocket：因为websocket可以实现实时服务器推送，所以服务器就可以来当这个中介者。标签页通过向服务器发送数据，然后服务器再向其他标签推送转发
• ShareWorker：会在页面的生命周期内创建一个唯一的线程，并开启多个页面也只会使用同一个线程，标签页共享一个线程
• postMessage：

// 发送方
window.parent().pastMessage('发送的数据','http://接收的址')
// 接收方
window.addEventListener('message',(e)=>{ let data = e.data })