浏览器的多线程

浏览器的多线程

 

前言

JavaScript是单线程，这个应该都有了解。那么，对于JavaScript的宿主环境，浏览器，浏览器的内核是多线程的。

 

在内核控制下各线程相互配合以保持同步，一个浏览器通常由以下常驻线程组成：

• GUI 渲染线程
• JavaScript引擎线程
• 定时触发器线程
• 事件触发线程
• 异步http请求线程

而常驻的线程至少有3个：

• 1、GUI 渲染线程
• 2、JavaScript引擎线程
• 3、事件触发线程

 

GUI渲染线程

负责渲染浏览器界面HTML元素,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。在Javascript引擎运行脚本期间,GUI渲染线程都是处于挂起状态的,也就是说被”冻结”了.

 

Javascript引擎线程

也可以称为JS内核，主要负责处理Javascript脚本程序，例如V8引擎。Javascript引擎线程理所当然是负责解析Javascript脚本，运行代码。

 

GUI 渲染线程 与 JavaScript引擎线程互斥！

由于JavaScript是可操纵DOM的，如果在修改这些元素属性同时渲染界面（即JavaScript线程和UI线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了。因此为了防止渲染出现不可预期的结果，浏览器设置GUI渲染线程与JavaScript引擎为互斥的关系，当JavaScript引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到引擎线程空闲时立即被执行。这也是为什么<script>标签要放到body标签的最底部。

 

定时触发器线程

浏览器定时计数器并不是由JavaScript引擎计数的, 因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确, 因此通过单独线程来计时并触发定时是更为合理的方案。

 

事件触发线程

当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可以是当前执行的代码块如定时任务、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。定时块任何和ajax请求等这些异步任务，事件触发线程只是在到达定时时间或者是ajax请求成功后，把回调函数放到事件队列当中

 

异步http请求线程

在XMLHttpRequest在连接后是通过浏览器新开一个线程请求， 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件放到 JavaScript引擎的处理队列中等待处理。在发起了一个异步请求时，http请求线程则负责去请求服务器，有了响应以后，事件触发线程再把回到函数放到事件队列当中。

 

参考文献：http://imweb.io/topic/58e3bfa845e5c13468f567d5