一、进程、线程之间的关系

一个进程有一个或多个线程，线程之间共同完成进程分配下来的任务。

打个比方：
假如进程是一个工厂，工厂有它的独立的资源
工厂之间相互独立
线程是工厂中的工人，多个工人协作完成任务
工厂内有一个或多个工人
工人之间共享空间

再完善完善概念：
工厂的资源 ——> 系统分配的内存（独立的一块内存）
工厂之间的相互独立 ——> 进程之间相互独立
多个工人协作完成任务 ——> 多个线程在进程中协作完成任务
工厂内有一个或多个工人 ——> 一个进程由一个或多个线程组成
工人之间共享空间 ——> 同一进程下的各个线程之间共享程序的内存空间（包括代码段、数据集、堆等）

进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位）

二、浏览器内的进程

首先，浏览器是多进程的，之所以浏览器能够运行，是因为系统给浏览器分配了资源，如cpu、内存。
简单的说就是，浏览器每打开一个标签页，就相当于创建了一个独立的浏览器进程。

注意：在这里浏览器应该也有自己的优化机制，有时候打开多个tab页后，可以在Chrome任务管理器中看到，有些进程被合并了（譬如打开多个空白标签页后，会发现多个空白标签页被合并成了一个进程），所以每一个Tab标签对应一个进程并不一定是绝对的。

除了浏览器的标签页进程之外，浏览器还有一些其他进程来辅助支撑标签页的进程，如下：
① Browser进程：浏览器的主进程（负责协调、主控），只有一个。
作用有
负责浏览器界面显示，与用户交互。如前进，后退等
负责各个页面的管理，创建和销毁其他进程
网络资源的管理，下载等

② 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建

③ GPU进程：最多一个，用于3D绘制等

④ 浏览器渲染进程（浏览器内核），Renderer进程，内部是多线程的，也就是我们每个标签页所拥有的进程，互不影响，负责页面渲染，脚本执行，事件处理等

三、浏览器内核（渲染进程）

有名的Renderer进程，页面的渲染，js的执行，事件的循环都在这一进程内进行，该进程下面拥有着多个线程，靠着这些现成共同完成渲染任务。

那么这些线程是什么呢，如下：

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

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

③ 事件触发线程
听起来像JS的执行，但是其实归属于浏览器，而不是JS引擎，用来控制时间循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）

当JS引擎执行代码块如setTimeout时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中
当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理

注意：由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）

④ 定时触发器线程
setInterval与setTimeout所在线程
定时计时器并不是由JS引擎计时的，因为如果JS引擎是单线程的，如果JS引擎处于堵塞状态，那会影响到计时的准确
当计时完成被触发，事件会被添加到事件队列，等待JS引擎空闲了执行

注意：W3C的HTML标准中规定，setTimeout中低与4ms的时间间隔算为4ms

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

四、 js引擎为什么是单线程

JavaScript作为一门客户端的脚本语言，主要的任务是处理用户的交互，而用户的交互无非就是响应DOM的增删改，使用事件队列的形式，一次事件循环只处理一个事件响应，使得脚本执行相对连续。如果JS引擎被设计为多线程的，那么DOM之间必然会存在资源竞争，那么语言的实现会变得非常臃肿，在客户端跑起来，资源的消耗和性能将会是不太乐观的，故设计为单线程的形式，并附加一些其他的线程来实现异步的形式，这样运行成本相对于使用JS多线程来说降低了很多。

五、浏览器内核中线程之间的关系

1. GUI渲染线程与JS引擎线程互斥

因为JS引擎可以修改DOM树，那么如果JS引擎在执行修改了DOM结构的同时，GUI线程也在渲染页面，那么这样就会导致渲染线程获取的DOM的元素信息可能与JS引擎操作DOM后的结果不一致。

解决：GUI线程与JS线程设计为互斥关系，当JS引擎执行的时候，GUI线程需要被冻结，但是GUI的渲染会被保存在一个队列当中，等待JS引擎空闲的时候执行渲染。

由此也可以推出，如果JS引擎正在进行CPU密集型计算，那么JS引擎将会阻塞，长时间不空闲，导致渲染进程一直不能执行渲染，页面就会看起来卡顿卡顿的，渲染不连贯.
所以，要尽量避免JS执行时间过长。

2. JS引擎线程与事件触发线程、定时触发器线程、异步HTTP请求线程

事件触发线程、定时触发器线程、异步HTTP请求线程三个线程有一个共同点：
使用回调函数的形式，当满足了特定的条件，这些回调函数会被执行。

这些回调函数被浏览器内核理解成事件，在浏览器内核中拥有一个事件队列，这三个线程当满足了内部特定的条件，会将这些回调函数添加到事件队列中，等待JS引擎空闲执行。

例如异步HTTP请求线程，线程如果检测到请求的状态变更，如果设置有回调函数，回调函数会被添加事件队列中，等待JS引擎空闲了执行。

但是，JS引擎对事件队列（宏任务）与JS引擎内的任务（微任务）执行存在着先后循序，当每执行完一个事件队列的时间，JS引擎会检测内部是否有未执行的任务，如果有，将会优先执行（微任务）。
果有，将会优先执行（微任务）。

浅谈浏览器多进程与JS线程 1相关推荐

浅谈浏览器多进程与JS线程
引言一直对浏览器的进程.线程的运行一无所知,经过一次的刷刷刷相关的博客之后,对其有了初步的了解,是时候该总结一波了. 进程.线程之间的关系一个进程有一个或多个线程,线程之间共同完成进程分配下来的任 ...
浅谈浏览器的兼容性（从HTML、CSS、JS、PC端、移动端等方面）
浅谈浏览器的兼容性) 前言一.HTML部分 a.html5的新标签 b.img的alt属性 c.ul标签内外边距问题二.css部分 a.css的hack问题:主要针对IE的不同版本,不同的浏览器的 ...
js 多个定时器_从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理(二)
作者:撒网要见鱼 https://segmentfault.com/a/1190000012925872 本文接上篇 <从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理(一)> ...
从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
最近发现有不少介绍JS单线程运行机制的文章,但是发现很多都仅仅是介绍某一部分的知识,而且各个地方的说法还不统一,容易造成困惑. 因此准备梳理这块知识点,结合已有的认知,基于网上的大量参考资料,从浏览器 ...
js中当等于最小值是让代码不执行_从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理...
前言见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...
【瑞数5】浅谈某普期刊JS逆向的环境检测点
[瑞数5]浅谈某普期刊JS逆向的环境检测点前言 JS加载流程第一个JS 第二个JS 第三个JS AST简单解混淆环境检测前奏异步执行JS流程高潮运行结果总结鸣谢前言这几天把某期刊 ...
python 共享内存变量_浅谈python多进程共享变量Value的使用tips
前言: 在使用tornado的多进程时,需要多个进程共享一个状态变量,于是考虑使用multiprocessing.Value(对于该变量的具体细节请查阅相关资料).在根据网上资料使用Value时,由于 ...
【前端】浅谈浏览器内核：渲染引擎、JS引擎
浏览器内核是什么? 简而言之,浏览器内核就是把我们编写的代码转换为页面的中控件. 虽然现在大家谈起浏览器内核时,多指代渲染引擎(Rendering engine 或 layout engineer). ...
[转]浅谈浏览器插件检测和自定义协议的支持
前一阵子一直在折腾浏览器的插件检测和自定义协议的支持. 经过种种痛苦的折腾,算是对这一领域有了点浅显的认知.特此记录一下一.背景知识自定义协议:常用的协议有 http:// https:// f ...

浅谈浏览器多进程与JS线程 1

文章目录