浏览器渲染进程多线程

3,574 阅读3分钟

之前有关浏览器渲染进程和线程这一块,纠结了很久,因为我完全搞不懂什么是线程和进程,如果你和我一样,也是之前没有了解过,或者不是很清楚什么是线程,什么是进程,建议先看浏览器多进程架构,搞清楚了线程和进程后,看这篇文章可能会事半功倍。

GUI渲染线程

负责渲染浏览器界面,解析HTML、CSS、构建DOM树和RenderObject树,布局和绘制等

当界面需要重绘(Repaint)或由于某种操作导致重排(Reflow)时,该线程就会执行

GUI渲染线程和JS引擎线程是互斥的,当js引擎执行时GUI线程会被挂起(相当于冻结),GUI更新会被保存在一个队列中等到js引擎空闲时立即执行

JS引擎线程

也称之为js内核,负责处理javascript脚本程序(V8引擎)

JS引擎线程负责解析javascript脚本,运行代码

JS引擎一直在等待着任务的到来,然后加以处理,一个renderer进程中无论如何都只有一个js线程在运行js程序

由于GUI渲染线程和JS引擎线程是互斥的,所以如果JS执行时间如果过长,这样就会造成页面渲染不连贯,导致页面渲染加载阻塞

事件触发线程

归属于浏览器而不是js引擎,用来控制事件循环

当js引擎执行代码,如setTimeout时(也可以是来自浏览器内核的其他线程,如鼠标点击,ajax请求等),会将对应的任务添加到事件线程当中

当对应的事件符合触发条件被触发时,事件线程会把事件添加到待处理事件队列的队尾,等待js引擎的处理

由于js的单线程关系,所以这些待处理队列中的事件都得排队等待js引擎处理(当js引擎空闲时才会去执行)

定时器触发器线程

setInterval和setTimeout所在的线程

浏览器定时计数器并不是由js引擎计数的(因为js是单线程的,如果处于阻塞状态就会影响计数的准确性)

单独的线程来计时并触发定时(计时完毕后,添加到事件队列中,等待js引擎空闲后执行)

W3C在HTML标准中规定,规定要求setTimeout中低于4ms的时间间隔算为4ms

异步http请求线程

在XMLHttpRequest在连接后通过浏览器开一个线程请求

将检测到状态变更时,如果有设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中,再有js引擎执行

这里说的是主流的浏览器渲染进程的主要几个线程,但不囊括所有,如果遇到相应的问题,欢迎评论。