浏览器运行流程

前言：看了很多有关浏览器的工作原理文章，这是一点总结

进程（process）和线程（thread)

---

• 进程就好比工厂的车间
• 线程就好比车间里的工人。一个进程可以包括多个线程。
• 车间的空间是工人们共享的，比如许多房间是每个工人都可以进出的。这象征一个进程的内存空间是共享的，每个线程都可以使用这些共享内存。
• 进程间通过 IPC 通信

具体可查看：进程与线程的一个简单解释-阮一峰的网络日志

浏览器的架构

---

以chrome为例。

• Browser Process：

  • 负责包括地址栏，书签栏，前进后退按钮等部分的工作；
  • 负责处理浏览器的一些不可见的底层操作，比如网络请求和文件访问；

• Renderer Process：

  • 负责一个 tab 内关于网页呈现的所有事情

• Plugin Process：

  • 负责控制一个网页用到的所有插件，如 flash

• GPU Process

  • 负责处理 GPU 相关的任务

Browser Process

---

浏览器包含线程：

• UI thread ： 控制浏览器上的按钮及输入框；

• network thread: 处理网络请求，从网上获取数据；

• storage thread: 控制文件等的访问；

Renderer Process

---

• GUI渲染线程

  • 负责渲染浏览器界面，包括解析HTML、 CSS、构建DOM树、Render树、布局与绘制等
  • 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行

• JS引擎线程

  • JS内核，也称JS引擎，负责处理执行javascript脚本
  • 等待任务队列的任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS引擎在运行JS程序

• 事件触发线程

  • 听起来像JS的执行，但是其实归属于浏览器，而不是JS引擎，用来控制时间循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）
  • 当JS引擎执行代码块如setTimeout时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中
  • 当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理

• 定时触发器线程

  • setInterval与setTimeout所在线程
    定时计时器并不是由JS引擎计时的，因为如果JS引擎是单线程的，如果JS引擎处于堵塞状态，那会影响到计时的准确
  • 当计时完成被触发，事件会被添加到事件队列，等待JS引擎空闲了执行
  • 注意：W3C的HTML标准中规定，setTimeout中低与4ms的时间间隔算为4ms

• 异步HTTP请求线程

  • 在XMLHttpRequest在连接后新启动的一个线程
  • 线程如果检测到请求的状态变更，如果设置有回调函数，该线程会把回调函数添加到事件队列，同理，等待JS引擎空闲了执行

参考文献：
1、图解浏览器的基本工作原理
2、前端文摘：深入解析浏览器的幕后工作原理
3、浅谈浏览器多进程与JS线程