浏览器是多进程的

浏览器都包含哪些进程？

  • Browser进程：浏览器的主进程（负责协调、主控），只有一个。作用有
    • 负责浏览器界面显示，与用户交互。如前进，后退等
    • 负责各个页面的管理，创建和销毁其他进程
    • 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
    • 网络资源的管理，下载等
  • 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
  • GPU进程：最多一个，用于3D绘制等
  • 浏览器渲染进程（浏览器内核）（Renderer进程，内部是多线程的）：默认每个Tab页面一个进程，互不影响。

2.1. 浏览器多进程的优势

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

2.2. 重点是浏览器内核（渲染进程）

浏览器的渲染进程是多线程的

    1. GUI渲染线程
    • 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。
    • 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行
    • 注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
        1. JS引擎线程
        • 也称为JS内核，负责处理Javascript脚本程序。（例如V8引擎）
        • JS引擎线程负责解析Javascript脚本，运行代码。
        • JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序
        • 同样注意，GUI渲染线程与JS引擎线程是互斥的，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。
        1. 事件触发线程
        • 归属于浏览器而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）
        • 当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中
        • 当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
        • 注意，由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）
        1. 定时触发器线程
        • 传说中的setInterval与setTimeout所在线程
        • 浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确）
          • 因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
          • 注意，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。
        1. 异步http请求线程
        • 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
        • 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。

2.3. Browser进程和浏览器内核（Renderer进程）的通信过程

browser通信

梳理浏览器内核中线程之间的关系

GUI渲染线程与JS引擎线程互斥

JS阻塞页面加载

WebWorker，JS的多线程？

  • 创建Worker时，JS引擎向浏览器申请开一个子线程（子线程是浏览器开的，完全受主线程控制，而且不能操作DOM）
  • JS引擎线程与worker线程间通过特定的方式通信（postMessage API，需要通过序列化对象来与线程交互特定的数据）

WebWorker与SharedWorker

  • WebWorker只属于某个页面，不会和其他页面的Render进程（浏览器内核进程）共享
  • SharedWorker是浏览器所有页面共享的，不能采用与Worker同样的方式实现，因为它不隶属于某个Render进程，可以为多个Render进程共享使用

简单梳理下浏览器渲染流程

浏览器器内核拿到内容后，渲染大概可以划分成以下几个步骤：

  1. 解析html建立dom树
  2. 解析css构建render树（将CSS代码解析成树形的数据结构，然后结合DOM合并成render树）
  3. 布局render树（Layout/reflow），负责各元素尺寸、位置的计算
  4. 绘制render树（paint），绘制页面像素信息
  5. 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。

所有详细步骤都已经略去，渲染完毕后就是load事件了，之后就是自己的JS逻辑处理了

load事件与DOMContentLoaded事件的先后

css加载是否会阻塞dom树渲染？

普通图层和复合图层

从Event Loop谈JS的运行机制

  • JS分为同步任务和异步任务
  • 同步任务都在主线程上执行，形成一个执行栈
  • 主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。
  • 一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

EventLoop

单独说说定时器

  • 为什么要单独的定时器线程？因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确，因此很有必要单独开一个线程用来计时。
  • 什么时候会用到定时器线程？当使用setTimeout或setInterval时，它需要定时器线程计时，计时完成后就会将特定的事件推入事件队列中。

事件循环进阶：macrotask与microtask

除了广义的同步任务和异步任务，我们对任务有更精细的定义：

  • macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
  • micro-task(微任务)：Promise，process.nextTick

不同类型的任务会进入对应的Event Queue；事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。

（PS:这里process.nextTick有问题，运行环境不一样可能产生不一样的结果，还可能：并不是放在微任务后，而是宏任务执行完后，立马去执行这个回调，再去查询微任务）

宏任务和微任务.tiff