当前位置:网站首页>浏览器线程
浏览器线程
2022-07-29 15:06:00 【背藏玫瑰】
浏览器基础结构主要包含七个部分:
用户界面:用户所看到的内容和与之交互的功能组件,比如按钮、表单等等
浏览器引擎:负责控制和管理下一级的渲染引擎
渲染引擎:解析用户请求的内容并返回
网络:负责处理网关相关事宜,比如http服务
UI后端:负责绘制一些提示框等UI组件,底层使用的是操作系统的用户接口
js解析器:负责解析和执行js代码
数据存储:负责存储数据如cookie等
浏览器是多线程的,js是单线程的
1.GUI渲染线程
负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等。
当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行
注意,GUI渲染线程与JS引擎线程是互斥的,当JS引擎执行时GUI线程会被挂起(相当于被冻结了),GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
2.JS引擎线程
也称为JS内核,负责处理Javascript脚本程序。(例如V8引擎)
JS引擎线程负责解析Javascript脚本,运行代码。
JS引擎一直等待着任务队列中任务的到来,然后加以处理,一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序
同样注意,GUI渲染线程与JS引擎线程是互斥的,所以如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞。
3.事件触发线程
归属于浏览器而不是JS引擎,用来控制事件循环(可以理解,JS引擎自己都忙不过来,需要浏览器另开线程协助)
当JS引擎执行代码块如setTimeOut时(也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等),会将对应任务添加到事件线程中
当对应的事件符合触发条件被触发时,该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理
注意,由于JS的单线程关系,所以这些待处理队列中的事件都得排队等待JS引擎处理(当JS引擎空闲时才会去执行)
4.定时触发器线程
传说中的setInterval与setTimeout所在线程
浏览器定时计数器并不是由JavaScript引擎计数的,(因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确)
因此通过单独线程来计时并触发定时(计时完毕后,添加到事件队列中,等待JS引擎空闲后执行)
注意,W3C在HTML标准中规定,规定要求setTimeout中低于4ms的时间间隔算为4ms。
5.异步http请求线程
在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中。再由JavaScript引擎执行。
边栏推荐
猜你喜欢
随机推荐
【深度学习】深度学习刷SOTA的一堆trick
How to get local json
Google Play 政策更新 | 2022 年 7 月
不会多线程还想进BAT?精选19道多线程面试题,有答案边看边学
从通信延伸到全行业,亚信科技AntDB 7.0蓄势待发
将博客搬至CSDN
网络知识大集合(最详细)与网络通信过程
NLP自然语言处理-机器学习和自然语言处理介绍(三)
File management: logical structure
Google Earth Engine APP——一键实现底图添加和时序的添加和正反序的结合
error #6633: The type of the actual argument differs from the type of the dummy argument.
Qt学习第一天
极市直播丨严彬-Unicorn:走向目标跟踪的大一统(ECCV2022 Oral)
NLP自然语言处理-机器学习和自然语言处理介绍(二)
令人难以置信的DeepMind数据库现在包括了科学界已知的几乎所有蛋白质
See you in shenzhen!Cloud native to accelerate the application building special: see cloud native FinOps, SRE, high-performance computing scenario best practices
深度卷积生成对抗网络
【 LeetCode 】 88. Merging two orderly array
深度学习-神经网络
package-lock.json 有什么作用,如果项目中没有它会怎么样,举例说明









