浏览器内核及进程、线程

浏览器的构成

浏览器主要由SHELL和内核两部分组成，其中内核又分为渲染引擎和JS引擎。渲染引擎主要用于获取网页结构、添加CSS样式、计算网页结构等；JS引擎用于解析JavaScript语言，为网页添加动态效果。

浏览器内核

现市面上主流的浏览器内核有：

• Trident内核：由微软公司开发，主要浏览器有IE；
• Webkit内核：由苹果公司基于KHTML开发，主要浏览器有Safari、Chrome、360；
• Gecko内核：用C++开发的，主要浏览器有firefox；
• Presto内核：主要浏览器有Opera。

进程与线程

一、概念

进程相当于工厂：

• 有单独的空间（浏览器分配的内存）；
• 工厂与工厂之间彼此独立（进程与进程间相互独立）。

线程相当于工厂里的工人：

• 多个工人合作完成一个项目（多个线程完成一个进程）；
• 工人间共享空间（同一进程下的各个线程之间共享程序的内存空间，包括代码段、数据集、堆等）。

二、浏览器

浏览器是多进程的，主要包括：
1、browser进程：浏览器的主进程，主要负责浏览器的界面显示、与用户交互；网络资源的下载等；
2、第三方插件进程：每种插件对应一个进程，仅当使用插件时才会创建进程；
3、GPU进程：最多一个，用于3D绘制；
4、浏览器渲染进程（Render进程）：默认浏览器的每个Tab页就是一个render进程；负责网页的渲染、事件处理等。由多个线程共同完成：

• GUI渲染线程：
  • 负责页面的渲染；
  • 解析HTML、CSS，创建DOM树、Render树；
  • 与JS引擎线程相斥。
• JS引擎线程：
  • 负责解析JavaScript脚本；
  • 与GUI渲染线程相斥。
• 事件触发线程：
  • 归属于浏览器而不是JS引擎，用来控制事件循环；
  • 当JS引擎执行代码块（如鼠标点击事件等）时，将事件添加到事件队列中，等待JS引擎线程执行；
• 计时触发器线程：
  • 主要负责计时（setTimeout与setInterval），计时完毕后添加到事件队列中等待执行；
• 异步HTTP请求线程：发送网络请求。

browser进程与浏览器渲染进程的通信

1、browser进程接收到请求，先获取页面内容（从网络上下载资源），然后通过RendererHost接口传递给浏览器渲染进程；
2、浏览器渲染进程中的GUI渲染线程开始页面渲染，这其中可能会需要browser进程帮忙下载资源以及GPU进程的帮助；
3、浏览器渲染进程将渲染的结果发送给browser进程，browser进程对页面进行展示。

GUI渲染线程

1、解析HTML，并生成DOM树；
2、解析CSS，构建CSS规则；
3、将CSS规则与DOM树合并成render树；
4、布局render树（layout / reflow）；
5、绘制render树（paint）；
6、浏览器将各层的信息发送给GPU进程，GPU将各层信息进行合并（composite），并显示在屏幕上。

JS运行机制

1、JS运行主要包括三个方面：JS引擎线程、事件触发线程、计时触发器线程。
2、JS分为同步任务和异步任务。同步任务会被放进执行栈中，JS会优先处理执行栈中的任务，当执行栈中的任务被执行完毕（JS引擎空闲）时，由事件触发线程负责的事件队列中的任务会被提至JS引擎进行处理。
3、当使用setTimeout时，计时触发器线程负责计时，计时完毕后会被放进事件队列中等待JS引擎空闲处理。

---

参考：从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理