浏览器线程

[shenxuxiang]

浏览器线程

浏览器的常驻线程有哪些，他们的工作职责是什么？？

浏览器的5个常驻线程

浏览器事件触发线程

这个线程的作用就是用来控制交互，响应用户的行为。 当一个鼠标事件被触发时该线程会把事件添加到任务队列的队尾，等待JS引擎的处理。这个任务队列中可以包含定时器任务、AJAX异步请求回调任务等，由于JS的单线程关系所有这些任务都得排队等待JS引擎处理。

浏览器定时器触发线程

当我们在代码中使用 setTimeout 或者 setInterval 的时候，并不是由JavaScript引擎来进行计数的，因为JavaScript引擎是单线程的，如果处于阻塞线程状态就计不了时，它必须依赖外部来计时并触发定时，所以当代码运行时发现 setTimeout 或者 setInterval，这个时候就会将这个任务交给浏览器定时器触发线程，由它来进行计时，当时间达到程序给定的时间时，这个时候就会将对应的任务添加到任务队列的队尾。

ps：W3C的HTML标准中规定，setTimeout中低与4ms的时间间隔算为4ms，IE9及以上，chrome都是4ms，IE8及以下都是15.6ms。

浏览器http异步请求线程

这里说的就是所有的网络请求，包含 <link> ，ajax请求和 medial 资源的请求等，当一个网络请求开始发起到成功返回结果的这个阶段都是由该线程控制， 当检测到状态变更时，如果设置有回调函数，该线程就将状态变更事件放到任务队列的队尾。

js引擎线程

• 主要负责处理Javascript脚本程序，例如V8引擎。Javascript引擎线程理所当然是负责解析Javascript脚本，运行代码
• 等待任务队列的任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS引擎在运行JS程序

需要注意的地方： js引擎执行的时候会是一个阻塞的行为，会挂起GUI渲染线程。事件触发线程，定时器触发线程，http异步请求线程所产生的事件都会按照产生的顺序先压到队列中，采用先进先出的方式运行。再不断的从事件队列的对头取出事件，压入执行栈，由js主线程去执行，当事件执行完成以后再推出执行栈并重复这个过程，这就是事件循环javascript-event-loop。

GUI渲染线程

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

在Javascript引擎运行脚本期间,GUI渲染线程都是处于挂起状态的,GUI更新会被保存在一个队列中等到js引擎线程空闲时立即被执行。 因为JavaScript脚本是可以操纵DOM元素，如果在修改这些元素属性的同时渲染界面，那么渲染线程前后获得的元素数据就可能不一致了。所以当我们通过js来修改dom样式的时候，界面并不会立即重新渲染，而是将这些操作放在一个ui队列中等待执行。 如果JS引擎正在进行CPU密集型计算，那么JS引擎将会阻塞，长时间不空闲，页面一直不能执行渲染，页面就会看起来卡顿卡顿的，渲染不连贯，所以，要尽量避免JS执行时间过长。

但是，并不是所有的js 对DOM操作时，GUI线程都会被挂起，等待js引擎执行完再进行GUI渲染，比如说获取元素的位置，宽高等，

• offsetTop , offsetLeft , offsetWidth , offsetHeight
• scrollTop , scrollLeft , scrollWidth , scrollHeight
• clientTop , clientLeft , clientWidth , clientHeight
• getComputedStyle() ( currentStyle in IE ) 当获取以上的属性和方法时，浏览器为了获取最新的布局信息，不得不执行渲染队列中的 “待处理变化” ，并触发重排以返回正确的值。

js语言设定js引擎与GUI引擎是互斥的,也就是说GUI引擎在渲染时会阻塞js引擎计算。原因很简单,如果在GUI渲染的时候,js改变了dom,那么就会造成渲染不同步。

个大浏览器的渲染引擎

渲染引擎，也被称为浏览器内核，在线程方面又称为 GUI 线程。它是由各大浏览器厂商依照 W3C标准自行研发的，常见的浏览器内核可以分这四种：Trident 、Gecko、Blink、Webkit、Presto。

Trident （-ms-）

俗称 IE 内核，也被叫做 MSHTML 引擎，目前在使用的浏览器有 IE11 -，以及各种国产多核浏览器中的 IE 兼容模块。另外微软的 Edge 浏览器不再使用 MSHTML 引擎，而是使用类全新的引擎 EdgeHTML。

Gecko （-moz-）

俗称 Firefox 内核，Netscape6 开始采用的内核，后来的 Mozilla FireFox（火狐浏览器）也采用了该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。

Presto

Presto 是挪威产浏览器 opera 的 “前任” 内核，最新的 opera 浏览器内核现为 Blink。

Webkit

Safari , Chrome 内核原型，主要是 Safari 浏览器在使用的内核，也是特性上表现较好的浏览器内核。也被大量使用在移动端浏览器上。

Blink

由 Google 和 Opera Software 开发，在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。Blink 其实是 Webkit 的一个分支，添加了一些优化的新特性，例如跨进程的 iframe，将 DOM 移入 JavaScript 中来提高 JavaScript 对 DOM 的访问速度等，目前较多的移动端应用内嵌的浏览器内核也渐渐开始采用 Blink。

移动设备上浏览器内核

• iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit
• Android 4.4 之前的 Android 系统浏览器内核是 WebKit
• Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink
• Windows Phone 8 系统浏览器内核是 Trident