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)
相关推荐
FIN6668几秒前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy1 分钟前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
烛阴14 分钟前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python
莫叫石榴姐23 分钟前
SQL百题斩:从入门到精通,一站式解锁数据世界
大数据·数据仓库·sql·面试·职场和发展
sorryhc30 分钟前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy37 分钟前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
lvchaoq1 小时前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开1 小时前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
你总是一副不开心的样子(´ . .̫ .1 小时前
一、十天速通Java面试(第三天)
java·面试·职场和发展·java面试
我是华为OD~HR~栗栗呀1 小时前
23届考研-Java面经(华为OD)
java·c++·python·华为od·华为·面试