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)
相关推荐
好奇的候选人面向对象18 小时前
实现一个左右树形结构一对一关联的组件。这个方案使用两个el-tree组件,并实现它们之间的互相关联选择。
javascript·vue.js·elementui
Lovely Ruby18 小时前
前端er Go-Frame 的学习笔记:实现 to-do 功能(二)
前端·学习·golang
苏打水com18 小时前
第三篇:Day7-9 响应式布局+JS DOM进阶——实现“多端兼容+动态数据渲染”(对标职场“移动端适配”核心需求)
前端·css·html·js
一 乐18 小时前
旅游出行|基于Springboot+Vue的旅游出行管理系统设计与实现(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·旅游
玩具猴_wjh18 小时前
快手(安全方向)面试准备
安全·面试·职场和发展
想睡好18 小时前
元素的显示和隐藏 html5和css3的一些新特性
前端·css3·html5
p***323518 小时前
Nginx 配置前端后端服务
运维·前端·nginx
我看刑18 小时前
【已解决】el-date-picker type=“datetime“限制(动态)可选时间范围,精确到分钟!!!
前端·javascript·vue.js
周周爱喝粥呀19 小时前
【基础】Three.js 实现 3D 字体加载与 Matcap 金属质感效果(附案例代码)
前端·javascript·vue.js·3d
克喵的水银蛇19 小时前
Flutter 通用输入框封装实战:带校验 / 清除 / 密码切换的 InputWidget
前端·javascript·flutter