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)
相关推荐
我是伪码农4 分钟前
Vue 2.3
前端·javascript·vue.js
夜郎king29 分钟前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
辰风沐阳37 分钟前
JavaScript 的宏任务和微任务
javascript
夏幻灵1 小时前
HTML5里最常用的十大标签
前端·html·html5
冰暮流星2 小时前
javascript之二重循环练习
开发语言·javascript·数据库
Mr Xu_2 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
未来龙皇小蓝2 小时前
RBAC前端架构-01:项目初始化
前端·架构
程序员agions2 小时前
2026年,微前端终于“死“了
前端·状态模式
万岳科技系统开发2 小时前
食堂采购系统源码库存扣减算法与并发控制实现详解
java·前端·数据库·算法
程序员猫哥_2 小时前
HTML 生成网页工具推荐:从手写代码到 AI 自动生成网页的进化路径
前端·人工智能·html