理论篇 | 窥探浏览器运行的幕后

前言

上一篇《开篇 | 关于前端性能优化的探索》中提到，性能优化需要围绕着网络请求的过程和浏览器渲染机制去展开。但其中提到的渲染过程仅仅是关键路径渲染的部分，对于回流和重绘、UI渲染和JS引擎互斥的原因尚未明确。为了更好的理解这些，接下来我们深入认识一下浏览器的运作机制。

进程和线程

• 进程是一个程序运行的实例、是线程的容器 ， 操作系统会为进程分配独立的内存（进程之间互相独立）；
• 线程是进程的组成部分，线程共享进程所分配的资源（包括代码段、数据集、堆等）；
• 一个程序至少有一个进程，一个进程至少有一个线程（一个主线程和若干子线程）；
• 进程是资源分配的最小单位，线程是程序执行的最小单位；
• 某个线程执行出错，将会导致整个进程崩溃

windows 任务管理器查看后台进程：

多进程浏览器

本质上来说，浏览器也是一个程序，那么浏览器的运行单位就是进程。在 2008 年谷歌发布 Chrome 多进程浏览器之前，市面上几乎所有浏览器都是单进程的，后来因为有着流畅性、安全性、稳定性等较为明显的隐患逐渐被优化掉了。目前我们所使用的浏览器都是多进程浏览器。

浏览器的进程主要有以下几种：

打开 Chrome 任务管理器（快捷键 Shift+Esc ）可以查看浏览器当前的进程

浏览器多进程的优势

• 进程间所分配的运行资源相对独立，即便某个进程意外崩溃，也不至于对整个浏览器造成影响
• 多进程充分利用多核优势
• 方便使用沙盒模型隔离插件等进程，提高浏览器稳定性

渲染进程是多线程的

渲染进程是与页面渲染和性能优化最密切相关的部分。首先我们要知道，这个进程是多线程的，它包括了GUI渲染线
程、JS引擎线程、事件触发线程、定时器触发线程以及异步HTTP请求线程。

下面重点认识一下这些线程：

GUI渲染线程

• 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。
• 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行
• 注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

JS引擎线程

• 也称为JS内核，负责处理Javascript脚本程序。（例如V8引擎）
• JS引擎线程负责解析Javascript脚本，运行代码。
• JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序
• 同样注意，GUI渲染线程与JS引擎线程是互斥的，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。

事件触发线程

• 归属于浏览器而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）
• 当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中
• 当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
• 注意，由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）

定时触发器线程

• 传说中的setInterval与setTimeout所在线程
• 浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确）
• 因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
• 注意，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。

异步http请求线程

• 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
• 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。

小结

多线程与JS事件循环

有了以上的认知基础，咱们再结合着线程来回顾一下 JS 的事件循环机制，这里我按着自己的理解画了张示意图：

• 主线程运行时会产生执行栈
• 栈中的代码调用某些api时，会触发异步HTTP请求线程或定时触发器线程，它们执行完成后的回调，会交给事件触发线程管理
• 事件触发线程管理着一个事件队列
• 执行栈中的代码执行完毕后，就会读取事件队列中的事件去执行
• 浏览器为了能够使得JS内部task与DOM任务能够有序的执行，完成一个 Task 后、下一个Task开始之前，将对页面进行重新渲染（即交给GUI渲染进程处理）。这里也再次说明JS引擎线程和UI线程是互斥的、交替进行的。

浏览器渲染流程

认识了多线程浏览器的运作机制后，再来看一下从发送请求到页面渲染的过程。嗯~ 逐渐串起来了~

• 浏览器主进程（Browser）收到用户请求
• 通知网络进程获取页面内容（进行网络请求获取页面资源）
  • DNS解析
  • 建立TCP连接
  • 发起HTTP请求
  • HTTP响应，返回数据
• 数据获取成功后交给渲染进程获取成功后交给渲染进程（Render）
• 渲染进程工作（页面渲染）
  • 解析HTML\CSS，构建 Render 树
  • 计算布局、绘制
  • 如果碰到 JS 脚本，渲染进程挂起，JS引擎进程工作（进程互斥）
  • 如果需要获取资源，网络进程帮助获取资源（进程同步）
  • 如果需要进行3D绘制，GPU进程帮助绘制（进程同步）
  • 如果发生回流/重绘，渲染进程调整 Render 树，重新计算、绘制
  • 渲染完成
• GPU合成图层，显示到屏幕

参考链接

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理（很不错，说得很详细）
史上最全！图解浏览器的工作原理
从输入url到页面加载完成发生了什么详解