浅谈js的运行机制

js的运行机制

一、js的同步程序和异步程序

1.同步程序

• 指主线程上排队指向的任务，只有前一个任务执行完毕，才能执行下一个任务，当我们打开网站时，网站的渲染过程，比如元素的渲染，其实就是一个同步任务。

2.异步程序

• 异步程序是值不进入主程序，而进入任务队列，只有任务队列通知主线程，某个异步任务可以指向了，该任务才能进入主线程，当我们打开网站，像图片的加载，音频的加载，就是一个异步任务。
• 异步任务一般是ajax,计时器,读取文件

同步任务执行完毕后才会执行异步任务

二、js是单线程

以一个例子进行验证

for (let i = 0; i < 100; i++){
  console.log('1');
}
setTimeout(() => {
  console.log(2);
},0)
console.log(3);
/*1 1 1 1 ...100个1 3 2*/

说明一个任务执行完成才能执行下一个任务是单线程

三、事件循环

四、process.nextTick，setImmediate

process.nextTick：在同步任务执行完后，在异步任务执行前执行

setImmediate：当前循环结束执行

process.nextTick(() => {
  console.log(1);
})
//在同步任务执行完后，在异步任务执行前执行
console.log(2);
//同步任务
setTimeout(() => {
  console.log(3);
}, 0)
//异步任务 为0秒 进入第一次事件循环
setTimeout(() => {
  console.log(4);
}, 100)
//异步任务 不是0秒需要 下一次事件循环才能执行
setImmediate(() => {
  console.log(5);
})
//当前循环结束执行
//执行结果为 2 1 3 5 4

五、宏任务和微任务

宏任务：ajax，计时器，读取文件

微任务：promise的then

执行顺序

• 同步任务
• processnextTick
• 微任务
• 宏任务
• setImmediate

process.nextTick(() => {
  console.log(1);
})
console.log(2);
setTimeout(() => {
  console.log(3);
}, 0)
setTimeout(() => {
  console.log(4);
}, 100)
setImmediate(() => {
  console.log(5);
})
let p = new Promise((resolve) => {
  console.log(6);
  //同步任务
})
  .then(() => {
  console.log(7);
  //微任务
})
//执行结果 2 6 1 3 5 4

六、promise和async

async加在函数头部返回promise对象

async function fun() {
  return 1
}
let a = fun()
console.log(a);
//输出结果为 Promise{1}

等价于

function fun2() {
  return new Promise((resolve) => {
    resolve(1)
  })
}
let b = fun2()
console.log(b);
//输出结果为 Promise{1}

使用await实现promise

async function fun1() {
  let data = await fun2()
  //resolve()
  console.log(data);
  //相当于promise的then
}
async function fun2() {
  console.log(200);
  //同步resolve()
  return 100
}
fun1()
//执行结果为200 100

七、实例

console.log(1);
//同步
async function async1() {
  await async2()
  console.log(2);
  //相当于then 微任务
}
async1()
function async2() {
  console.log(3);
  //同步resolve
}
setTimeout(() => {
  console.log(4);
  //宏任务
}, 0)
new Promise((resolve) => {
  console.log(5);
  //同步
  resolve()
})
  .then(() => {
  console.log(6);
  //微任务then
  })
  .then(() => {
    console.log(7);
     //微任务then
  })
  console.log(8);
  //同步
  //1 3 5 8 2 6 7 4