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

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

前言

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

进程和线程

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

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

多进程浏览器

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

浏览器的进程

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

进程类型	做用
主进程（只有一个）	协调、主控。负责如菜单栏、标题栏等界面显示，文件访问，前进后退，以及子进程管理等
GPU 进程	GPU（图形处理单元），用于3D绘制等
插件进程	每一个插件对应一个进程，仅当使用该插件时才建立（沙箱模式）
网络进程	负责页面的网络资源加载，以前属于浏览器主进程中的一个模块，后来才独立出来
渲染进程（浏览器内核 ）	默认为每一个标签窗口页开辟一个独立的渲染进程（沙箱模式）， 负责将 HTML、CSS 和 JavaScript 等资源转为可交互的页面，其中包含多个子线程，即 JS 引擎线程、GUI 渲染线程、事件触发线程、定时触发器线程、异步 HTTP 请求线程等

打开 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程序（JS是单线程的）
• 一样注意，GUI渲染线程与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运行机制最全面的一次梳理（很不错，说得很详细）
史上最全！图解浏览器的工做原理
聊聊 JavaScript 与浏览器的那些事 - 引擎与线程