js工作原理

js是单线程

js作为浏览器的脚本语言,主要是实现用户与浏览器的交互,以及操作dom。

进程与线程

进程:是cpu分配资源的最小单位。

线程:是cpu调度的最小单位。(线程是建立在进场的基础上的一次程序运行单位,一个进程中可以有多个线程)

浏览器是多进程的吗?

在浏览器中,每打开一个tab页面,其实就是打开了一个新的进程,在这个进程中,有ui渲染线程,js执行线程,http请求线程。

宏微队列及执行顺序

异步任务又分为 宏任务 和 微任务,不同的API注册的任务会依次进入自身对应的队列中,然后等待 Event Loop将它们依次压入执行栈中执行。

宏任务

script表情(整体代码), setTimeout, setInterval, postMessage

微任务

promise.then

Event Loop 事件循环

执行过程如下:

  • 执行栈选择最先进入 异步队列的宏任务(通常是script整体代码),如果有则执行

  • 检查是否存在微任务,如果有,则会清空微任务队列

  • 更新render

  • 重复上面的步骤,直到异步队列为空

来个例子?

javascript 复制代码
    // 执行顺序问题,考察频率挺高的,先自己想答案**
    setTimeout(function () {
        console.log(1);
    });
    new Promise(function(resolve,reject){
        console.log(2)
        resolve(3)
    }).then(function(val){
        console.log(val);
    })
    console.log(4);

我们来解析一下是怎么运行的。

  1. 先执行 script 同步代码

先执行 new Promise中的 console.log(2) 和 console.log(4).

Promise中包裹的函数是同步执行的。

2.执行完 script 宏任务后,执行微任务,console.log(3), 微任务队列为空

  1. 执行一遍宏任务, 定时器,console.log(1)
相关推荐
不说别的就是很菜6 分钟前
【前端面试】Git篇
前端·git
threelab6 分钟前
Merge3D:重塑三维可视化体验的 Cesium+Three.js 融合引擎
开发语言·javascript·3d
欧阳码农15 分钟前
盘点这两年我接触过的副业赚钱赛道,对于你来说可能是信息差
前端·人工智能·后端
恋猫de小郭17 分钟前
Dart 3.10 发布,快来看有什么更新吧
android·前端·flutter
q***471822 分钟前
解决 Tomcat 跨域问题 - Tomcat 配置静态文件和 Java Web 服务(Spring MVC Springboot)同时允许跨域
java·前端·spring
R.lin23 分钟前
MyBatis 专题深度细化解析
oracle·面试·mybatis
小光学长25 分钟前
基于Web的课前问题导入系统pn8lj4ii(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
java·前端·数据库
Mintopia30 分钟前
🌐 跨模态迁移学习:WebAIGC多场景适配的未来技术核心
前端·javascript·aigc
绝无仅有31 分钟前
Redis 面试题解析:某度互联网大厂
后端·面试·架构
JarvanMo35 分钟前
使用 MediaPipe 在 Flutter web 中识别姿势
前端