阅读 355

chrome 里渲染进程的线程有哪些?做什么的?

打开一个页面,浏览器会打开至少 4 个进程:浏览器主进程,Gpu进程,渲染进程,网络进程。而且如果是标签页(同站点网页)还会共用一个渲染进程。以下是chrome浏览器的进程详情:


浏览器的渲染流程图:

image.png 接下来主要讲解的是渲染进程。

渲染进程是多线程的,它主要包含了以下六个线程:GUI线程,js引擎线程,定时器触发线程,事件触发线程,异步http请求线程,合成线程,io线程。

GUI渲染线程

负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。

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

JS引擎线程

(例如V8引擎)JS引擎线程负责解析Javascript脚本,运行代码。JS引擎一直等待着任务队列中任务的到来,然后加以处理,一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序

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

事件触发线程

归属于浏览器而不是JS引擎,用来控制事件循环。当JS引擎执行代码块如setTimeOut时(也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等),会将对应任务添加到事件线程中,当对应的事件符合触发条件被触发时,该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。

主线程接收到点击事件,把信息给 IO 线程,IO线程会将点击事件包装成任务添加到事案件线程中。当对应的任务符合触发条件时,就将任务添加到消息队列里面供 js引擎 处理。

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

定时触发器线程

传说中的setInterval与setTimeout所在线程

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

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

注意,W3C在HTML标准中规定,规定要求setTimeout中低于4ms的时间间隔算为4ms。(也就是0ms也算4ms)

异步http请求线程

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

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

合成线程

浏览器的渲染流程: html转化成dom,css转化成cssom,他们组成渲染树,然后进入布局阶段,分层,绘制,分块,光栅化,合成。

GUI渲染线程: html转化成dom,css转化成cssom,他们组成渲染树,然后进入布局阶段,分层,绘制

合成线程: 会将绘制所得的指令列表拆分成 256256 或者 512512 的图块,然后将图块放到光栅化线程池里面转化成位图。

在GUI渲染线程后执行,将GUI渲染线程生成的带绘制列表转换为位图。

IO线程

用来和其他进程进行通信,例如: 网络进程下载完成以后就会将信息发送给 IO 线程,通过IPC 通信。当用户点击页面按钮,浏览器主线程就会把这个信息通过 IPC 发送给 IO 线程。IO 线程会将这个时间包装成任务添加到消息队列里面,供事件循环机制不断处理。

文章分类
前端
文章标签