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)
相关推荐
小简GoGo3 分钟前
前端常用设计模式快速入门
javascript·设计模式
a程序小傲5 分钟前
中国邮政Java面试被问:Netty的FastThreadLocal优化原理
java·服务器·开发语言·面试·职场和发展·github·哈希算法
做科研的周师兄5 分钟前
【MATLAB 实战】|多波段栅格数据提取部分波段均值——批量处理(NoData 修正 + 地理信息保真)_后附完整代码
前端·算法·机器学习·matlab·均值算法·分类·数据挖掘
da_vinci_x10 分钟前
图标量产:从“手绘地狱”到“风格克隆”?Style Reference 的工业化实战
前端·游戏·ui·prompt·aigc·设计师·游戏美术
利刃大大18 分钟前
【ES6】变量与常量 && 模板字符串 && 对象 && 解构赋值 && 箭头函数 && 数组 && 扩展运算符 && Promise/Await/Async
开发语言·前端·javascript·es6
天若有情67321 分钟前
ES6 模块与 CommonJS 的区别详解
前端·javascript·es6
大猫会长24 分钟前
postgreSQL中,RLS的using与with check
开发语言·前端·javascript
摘星编程33 分钟前
React Native for OpenHarmony 实战:ProgressBar 进度条详解
javascript·react native·react.js
慧一居士36 分钟前
vite.config.ts 配置使用说明,完整配置示例
前端
wusp199443 分钟前
nuxt3模块化API架构
前端·javascript·nuxt3