目录
一、区分进程 、线程
1.1 首先官方的定义
进程:
进程 是CPU资源分配的最小单位(是能拥有资源和独立运行的最小单位)
线程:
线程 是CPU调度的最小单位(线程 是建立在 进程 的基础上的一次程序运行单位,一个进程可以有多个线程)
1.2 结合例子理解
工厂里有多个车间,每个车间一个或多个员工,每
进程 - - 工厂 ,工厂有独立的资源;工厂之间相互独立;
进程 - - 车间,
线程 - - 车间内每个员工 ,多个员工协作完成任务;员工之间共享车间空间
实际上:
- 进程里可以有一个或多个进程
- 一个进程可以有一个(单)或者多个(多)线程
- 不同进程(车间)之间也可以通信,不过代价较大
- 这提及的 单线程与多线程,都是指在一个进程内的单和多
1.3 前端方向上理解
-
首先 浏览器 属于多进程 应用程序
体现在:我们可以打开多个浏览器程序, -
浏览器是多进程的
体现在:一个浏览器程序里可以打开多个 Tab 页面 (就相当于创建了一个独立的浏览器进程)
如图:打开浏览的任务管理器可见,每个标签页都是一个进程。
二、浏览器包含哪些主要进程
-
Browser进程:浏览器的主进程(负责协调、主控),只有一个
负责浏览器页面显示、用户交互(如前进、后退等)
负责各个页面的管理、创建和销毁其他进程
将Renderer进程得到的内存中的Bitmap,绘制到用户界面
网络资源的管理、下载等 -
第三方插件进程:每种类型的插件对应一个进程,仅当使用该插件是才创建
-
GPU(Graphics Processing Unit)进程:最多一个,用于3D绘制
-
浏览器渲染进程(浏览器内核)(Renderer进程、内部是多线程的):默认每个Tab 页面一个进程,互不影响。
主要作用为页面渲染、脚本运行,事件处理等
接下来主要介绍浏览器渲染进程,
三、浏览器渲染进程(Renderer/浏览器内核)
牢记:浏览器的渲染进程是多线程的!
3.1 主要包含哪些线程呢?
-
GUI(Graphical User Interface 图形用户界面)渲染进程
负责渲染浏览器界面、解析HTML、CSS、构建DOM树和RenderObject树,布局和绘制等。
当界面需要重绘(Repaint)或者由于某种操作引发回流(reflow)时,该线程会执行
注意,GUI渲染线程与JS引擎线程是互斥的, -
JS引擎线程
也称JS内核,负责处理JavaScript脚本程序;
JS 引擎线程负责解析 JavaScript脚本、运行代码;
JS引擎一直等待着任务队列中任务的到来,然后加以处理,一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序。 -
事件触发线程
归属于浏览器而不是JS引擎,用来控制事件循环(可以理解为JS引擎忙不过来,浏览器另开的协助线程);
当JS引擎执行代码块如setTimeOut时(也可以为来自浏览器内核的其他线程,如鼠标点击,ajax异步请求等),会将对应的任务添加到事件线程中;
注意JS的单线程关系,所以这些队列中的事件得等到JS引擎空闲时才会排队执行。 -
定时触发器线程
就是 setInterval 与 setTimeOut 所在的线程
-
异步http请求线程
在XMLHttpRequest连接后是通过浏览器新开一个线程来请求的;
将检测到转态变更时,如果没有设置回调函数,异步线程就产生状态变更时间,将这个回调再放入事件队列中,再等JavaScript引擎执行。
四、Browser进程和浏览器渲染进程(浏览器内核/Renderer进程)的通信
-
Browser进程收到用户的请求,首先需要获取页面的内容(譬如通过网络下载资源),随后将该任务通过RendererHost接口传递给Renderer进程
-
Renderer进程的Renderer接口接收到信息、简单解释后,交给渲染进程开始渲染
渲染进程接收请求,加载网页并渲染网页,这其中可能需要Browser进程获取资源和需要GPU进程进行渲染;
可能会有JS线程操作DOM(可能会造成回流并重绘);
最后Render进程将结果传递给Browser进程; -
Browser进程接收到结果后并将结果绘制出来
五、从EventLoop谈JS执行机制
首先理解一个概念:
- JS分为同步任务和异步任务
- 同步任务都在主线程上执行,形成一个执行栈
- 主线程之外,事件触发线程管理和一个任务队列,只要异步任务(Web APIs)有了运行结果,就在任务队列中放入一个事件
- 一旦 执行栈 中的 同步任务执行完毕(此时JS引擎空闲),系统EventLoop就会读取任务队列中的事件。
EventLoop(事件轮询)的核心
事件轮询的核心是:回调函数。
- 什么叫回调函数?
参数为函数的函数为回调函数。(回调是作为参数传递给另一个函数并在其父函数完成后执行的函数。)
//sort为高阶函数
arr.sort(function (){
//回调函数且为同步回调函数
})
setTimeOut(function(){
//回调函数且为异步回调函数
},3000)
- 同步回调函数,异步回调函数?
一般都会标明该方法为同步还是异步回调函数。
详细介绍请转此,https://segmentfault.com/a/1190000012925872,非常好的干货!