多进程的浏览器

进程概念

进程是操作系统分配资源的基本单位，而浏览器是多进程的程序。浏览器通过多个tab页来加载多个页面，标准上一个tab页应对应浏览器的一个进程。浏览器之所以能加载出页面，是因为操作系统给浏览器的各个进程分配了资源（CPU、内存）。

浏览器包含的进程

浏览器在打开后具体包含以下主要进程（未开始打开tab页加载页面）：

1. Browser进程：浏览器的主进程，主要作用有
   • 控制浏览器的交互动作，例如：打开关闭页面、前进后退按钮、接受URL输入等
   • 网络资源的下载
   • 将renderer渲染进程的结果展示到用户界面
2. 插件进程：每种浏览器插件对应一个进程。
3. GPU进程：用于3D绘制等，最多只有一个。

浏览器初始化完成后，每打开一个tab页，即多增加一个渲染进程。

多进程的优、劣势

相对于单进程浏览器，多进程有优点也有缺点，但肯定是利大于弊
优点：

• 避免单个页面或者插件奔溃后导致整个浏览器崩溃
• 多进程能利用多核优势

缺点：

• 占用更多的内存资源

多线程的渲染进程

渲染进程控制着整个页面的加载、渲染、JS代码执行和事件循环等。因此分为多个线程来分别执行不同的任务。

1. UI渲染线程
   • 负责结合页面的DOM节点树和CSSOM树来渲染render树。
   • 在界面reflow或者repaint的时候会执行
2. JS引擎线程
   • 负责解析并执行JS代码，与UI渲染线程是互斥的，无法同时执行两者。
   • JS引擎会不断地遍历事件队列，从中提取出事件来执行。
3. 事件触发线程
   • 负责维护事件队列，当一些事件被触发时，该线程会把事件添加至事件队列的末尾，等待JS引擎处理。
4. 定时器线程
   • 负责计时任务，例如setTimeout的定时不可能由JS引擎来计时（JS引擎的阻塞会导致计时不准确），因此需要该线程来计时，计时完成后触发事件。
5. 异步http请求线程
   • XMLHttpRequest连接是通过浏览器新开该线程来实现，该线程会监听连接的状态是否改变。在状态改变时触发相应的回调函数。

Web Worker——JS引擎线程的帮手

前面提到JS引擎线程的执行会阻塞UI渲染线程，当JS引擎需要进行大量计算时，就会造成UI渲染线程的阻塞，从而导致页面卡顿现象。针对这个问题，HTML5新提出了Web Worker。

具体机制是JS引擎向浏览器申请新开一个Web Worker的子线程，将大量计算放在Web Worker线程中计算。当计算完成时Web Worker通过postMessage将结果返回给JS引擎。

写在最后

我个人开了一个公众号“前端搬运小工”，我会定期推送优秀的前端精选文章，拒绝无脑基础入门的文章，带给你不一样的前端视角。

多进程的浏览器

进程概念

进程是操作系统分配资源的基本单位，而浏览器是多进程的程序。浏览器通过多个tab页来加载多个页面，标准上一个tab页应对应浏览器的一个进程。浏览器之所以能加载出页面，是因为操作系统给浏览器的各个进程分配了资源（CPU、内存）。

浏览器包含的进程

浏览器在打开后具体包含以下主要进程（未开始打开tab页加载页面）：

1. Browser进程：浏览器的主进程，主要作用有
   • 控制浏览器的交互动作，例如：打开关闭页面、前进后退按钮、接受URL输入等
   • 网络资源的下载
   • 将renderer渲染进程的结果展示到用户界面
2. 插件进程：每种浏览器插件对应一个进程。
3. GPU进程：用于3D绘制等，最多只有一个。

浏览器初始化完成后，每打开一个tab页，即多增加一个渲染进程。

多进程的优、劣势

相对于单进程浏览器，多进程有优点也有缺点，但肯定是利大于弊
优点：

• 避免单个页面或者插件奔溃后导致整个浏览器崩溃
• 多进程能利用多核优势

缺点：

• 占用更多的内存资源

多线程的渲染进程

渲染进程控制着整个页面的加载、渲染、JS代码执行和事件循环等。因此分为多个线程来分别执行不同的任务。

1. UI渲染线程
   • 负责结合页面的DOM节点树和CSSOM树来渲染render树。
   • 在界面reflow或者repaint的时候会执行
2. JS引擎线程
   • 负责解析并执行JS代码，与UI渲染线程是互斥的，无法同时执行两者。
   • JS引擎会不断地遍历事件队列，从中提取出事件来执行。
3. 事件触发线程
   • 负责维护事件队列，当一些事件被触发时，该线程会把事件添加至事件队列的末尾，等待JS引擎处理。
4. 定时器线程
   • 负责计时任务，例如setTimeout的定时不可能由JS引擎来计时（JS引擎的阻塞会导致计时不准确），因此需要该线程来计时，计时完成后触发事件。
5. 异步http请求线程
   • XMLHttpRequest连接是通过浏览器新开该线程来实现，该线程会监听连接的状态是否改变。在状态改变时触发相应的回调函数。

Web Worker——JS引擎线程的帮手

前面提到JS引擎线程的执行会阻塞UI渲染线程，当JS引擎需要进行大量计算时，就会造成UI渲染线程的阻塞，从而导致页面卡顿现象。针对这个问题，HTML5新提出了Web Worker。

具体机制是JS引擎向浏览器申请新开一个Web Worker的子线程，将大量计算放在Web Worker线程中计算。当计算完成时Web Worker通过postMessage将结果返回给JS引擎。

写在最后

我个人开了一个公众号“前端搬运小工”，我会定期推送优秀的前端精选文章，拒绝无脑基础入门的文章，带给你不一样的前端视角。