【JavaScript】浏览器与事件循环

浏览器的进程模型

主要包含:浏览器进程、网络进程、渲染进程;

一个进程就是一块内存空间;

进程:操作系统资源分配的基本单位,每一个进程都拥有独立的内存空间和系统资源,可以独立运行;

线程:操作系统任务调度和执行的基本单位;

渲染进程

1、会启动一个渲染主线程(执行js、渲染页面),处理html、css、js

2、主要线程:其中js、渲染线程是只能进行一个;

  • JS引擎线程(在主线程中,执行JS代码)
  • GUI渲染线程(在主线程中,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等)
  • 事件触发线程(控制事件循环,当事件被触发,将异步任务或者某些触发事件如:click等放入事件队列中,等待JS引擎执行)
  • 定时器线程(处理settimeout和settimeinterval)
  • 异步HTTP请求线程(负责发起http网络请求,当请求完成后将事件放入事件队列中,等待JS引擎执行)

3、无限循环(又叫消息循环、事件循环)去消息队列(message queue)中拿任务(js代码);没有任务会休眠;执行 JS 时遇到其他线程可以做的事(如定时器、网络请求、监听事件、修改页面等),调用其他线程执行,其中异步线程的执行异步任务并在执行完结束后将回调添加到消息队列尾部,属于渲染线程的就直接放到队列中,等待主线程把当前同步任务执行完去循环队列,若此时主线程休眠,则唤醒渲染主线程进行循环;

4、优先级

任务没有优先级按先后顺序,队列有优先级,同一类型的任务放在相同的队列,如谷歌有延时队列、交互队列、微队列等,浏览器循环时可以从不同队列中获取任务,其中微队列优先级最高;

相关推荐
天涯学馆2 小时前
Next.js与NextAuth:身份验证实践
前端·javascript·next.js
HEX9CF2 小时前
【CTF Web】Pikachu xss之href输出 Writeup(GET请求+反射型XSS+javascript:伪协议绕过)
开发语言·前端·javascript·安全·网络安全·ecmascript·xss
ConardLi2 小时前
Chrome:新的滚动捕捉事件助你实现更丝滑的动画效果!
前端·javascript·浏览器
ConardLi3 小时前
安全赋值运算符,新的 JavaScript 提案让你告别 trycatch !
前端·javascript
积水成江3 小时前
关于Generator,async 和 await的介绍
前端·javascript·vue.js
Z3r4y3 小时前
【Web】portswigger 服务端原型污染 labs 全解
javascript·web安全·nodejs·原型链污染·wp·portswigger
人生の三重奏3 小时前
前端——js补充
开发语言·前端·javascript
Tandy12356_3 小时前
js逆向——webpack实战案例(一)
前端·javascript·安全·webpack
老华带你飞3 小时前
公寓管理系统|SprinBoot+vue夕阳红公寓管理系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·spring boot·课程设计
qbbmnnnnnn4 小时前
【WebGis开发 - Cesium】如何确保Cesium场景加载完毕
前端·javascript·vue.js·gis·cesium·webgis·三维可视化开发