事件循环-同步异步-计时器精确问题

消息队列的解释

每个任务都有一个任务类型。
同一个类型的任务必须在一个队列中。
不同类型的任务可以分属于不同的队列中。
在一次事件循环中,浏览器可以【根据实际情况】从不同的队列中取出任务执行。
浏览器必须准备好一个微队列,微队列中的任务优先其他所有类型的任务。

chrome中的常见队列

在 chrome 的实现中,至少包含了下面的队列:
1,延时队列:用于存放计时器到达后的回调任务,优先级 中
2,交互队列:也就我们说的点击事件,浏览器缩放窗口等;优先级高。
3,微队列:用户存放需要最快执行的任务,优先级[最高]

阐述一下 JS的事件循环

事件循环又叫做消息循环,是浏览器渲染主线程的工作方式。
在Chrome 的源码中,它开启一个不会结束的 for 循环;
每次循环从消息队列中取出第一个任务执行。
而其他线程只需要在合适的时候将任务加入到队列末尾即可。
过去把消息队列简单分为宏队列和微队列,
这种说法目前已无法满足复杂的浏览器环境,
取而代之的是一种更加灵活多变的处理方式。
根据 W3C官方的解释:每个任务有不同的类型,同类型的任务必须在同一个队列。
不同的任务可以属于不同的队列。
不同任务队列有不同的优先级。
在一次事件循环中,由浏览器自行决定取哪一个队列的任务。
但浏览器必须有一个微队列,微队列的任务一定具有最高的优先级,必须优先调度执行。

代码执行顺序问题

你现在记住:主线程肯定是最先执行的;
代码必须要等到主线程执行完之后;
才能去消息队列中去拿取任务执行;
然后消息队列中有优先级; 微队列 ==> 交互队列 ==> 延时队列

1,理解先同步-后异步(延时队列)

setTimeout(()=>{
  console.log(1)
},0)
console.log(2)
输出的结果:2 然后是1
为什么呢?
因为:主线程代码肯定是先执行;哪怕你延时0毫秒。
主线程执行完毕后。
然后从消息队列中拿取延时队列执行;
所以先输出了2;然后是1

2,理解先同步-后异步(延时队列)

 function yanShi(time){
  var start = Date.now();
  while(Date.now() - start < time){

  }
}
setTimeout(()=>{
  console.log(2)
},0)
yanShi(1000)
console.log(1)
先执行 yanShi函数;这个函数会延时1s后;
我们去输出1;这个时候我们的主线程已经执行完了;
然后我们去执行延时队列中的代码;输出2;
所以:等待1s后,先输出2;然后是1 

3,new Promise(callback)与 new Promise().then的区别

很多时候,我们都以为new Promise(callback) 是异步的;
其实这个观点是错误的;
当我们调用new Promise(callback)时,它是一个同步代码,回调函数会立即执行。
new Promise().then这个才是异步的;
他们的区别之一就是说:前者是同步的;后者是异步的;
下面我们来看一段代码

4,new Promise(callback)是同步代码的

console.log('start');
const promise1 = new Promise((resolve, reject) => {
  console.log(1)
})
console.log('end');
有些同学认为是 start - end - 1;
有的同学认为是 start- 1 -end
大家可以去输出一下;这里就不说争取答案了.

5,promise.then是异步

console.log('start');
const promise1 = new Promise((resolve, reject) => {
  console.log(1)
  resolve(2)
})
promise1.then(res => {
  console.log(res)
})
console.log('end');
我们先是执行主线的代码;输出start;
new Promise 是一个同步的代码;输出 1;
promise1.then是一个微队列;
需要等待主线程执行完毕之后在执行;所以先输出end;
等待主线执行完毕之后,最后输出 2

6,promise.then要状态发生改变才会执行,否则不会执行then

console.log('start');
const promise1 = new Promise((resolve, reject) => {
  console.log(1)
})
promise1.then(res => {
  console.log(2)
})
console.log('end');

这个输出结果很多小伙伴会认为是: 
start - 1 - end - 2
但是实际2不会输出的;
为啥2不会输出呢?
因为 Promise的then方法必须要等到 padding 状态发生改变时才会触发then方法;
也就时说:要触发then方法必须要调用 resolve 或者 reject才会触发;其他不会触发

7,先主线程 - 计时器 - 微队列

const promise = new Promise((resolve, reject) => {
  console.log(1);
  setTimeout(() => {
    console.log("2");
    resolve("3");
    console.log("4");
  }, 0);
  console.log(5);
});

promise.then((res) => {
  console.log(res);
});

console.log(6);
我们都知道主线程先执行; 
new Promise下的代码是主线程的;刚刚我们说过:
小技巧:我们可以把 console.log(1) 当作 fn1函数输出1;
所以先输出 1 - 5 - 6
然后我们看 setTimeout[延时队列] 和  promise.then[微队列] 谁先执行;
正常情况下是微任务 >  延时队列
但是 then方法是需要状态改变时才会被触发,要想触发then需要先执行 setTimeout
所以又输出了 2 - 4 -3
//  1 - 5 - 6 - 2 - 4 -3

8,延时队列

const timer1 = setTimeout(() => {
 console.log('1');
  const promise1 = Promise.resolve().then(() => {
    console.log('2')
  })
}, 0)

const timer2 = setTimeout(() => {
  console.log('3')
}, 0)

// 1 - 2 - 3

9,主线程 - 添加到微队列 - 延时队列

setTimeout(()=>{
  console.log(1)
},0)
Promise.resolve().then(function(){
  console.log(2)
})
console.log(3)
同样,我们先去执行主线程的代码;
所以先输出的是3;
然后我们去消息队列中去获取任务;
先拿取微队列,然后是交互队列(这里没有),然后是延时队列;
这里 Promise.resolve().then(Fn)就是把一个函数Fn添加到微队列中;
因此执行2;最后输出1;
3--2--1

把一个任务添加到微队列中的方式

Promise.resolve().then(fn函数)
fn这个函数就会添加到微队列中

10,主线程- 添加到微队列 - 延时队列

function a(){
  console.log(1)
  Promise.resolve().then(function(){
    console.log(2)
  })
}
setTimeout(()=>{
  console.log(3)
  Promise.resolve().then(a)
},0)
Promise.resolve().then(()=>{
  console.log(4)
})
console.log(5)
首先我们执行主线的代码;输出5;
然后我们看是否有微队列;如果有去执行;所以输出4;
微队列执行完后我们看交互队列;没有
我们去执行延时队列;所以输出3;
最后我们执行1;然后数2
最终的结果是:5-4-3-1-2
注意点:延时队列中,有输出语句,有添加到微队列;
它是一个一个去执行;并不会说先去做微队列。
而是按照正常代码执行顺序去做。

11,主线程-立即添加到微队列-延时队列

function a(){
  console.log(1)
  Promise.resolve().then(function(){
    console.log(2)
  })
}

setTimeout(()=>{
  console.log(3)
},0)

Promise.resolve().then(a)
console.log(5)

最后的输出: 5-1-2-3

下面这输出比较难-特别是第2个

console.log('0')

const fn = () => (new Promise((resolve, reject) => {
  console.log(1);
  resolve('ok')
}))

console.log('2')

fn().then(res => {
  console.log(res)
})

console.log('3')
//  微任务 - 延时队列
const promise1 = Promise.resolve().then(() => {
  console.log('1');
  const timer2 = setTimeout(() => {
    console.log('2')
  }, 0)
});
// 延时队列 - 微任务
const timer1 = setTimeout(() => {
  console.log('3')
  const promise2 = Promise.resolve().then(() => {
    console.log('4')
  })
}, 0)
这两个是比较难的;如果小伙伴能正确答对;
就算理解了。
第1个的输出是:0 - 2 - 1 - 3 - ok
第2个的输出是:1 - 3 - 4 - 2

JS中的计时器能够做到精确计时吗?为什么?

不行。因为:
1,计算机硬件没有原子钟,无法做到精确计时。
2,操作系统的计时函数本身就有少量偏差,由于 JS 的计时器最终调用的是操作系统的函数,这又带来了偏差。
3,按照 W3C 的标准,浏览器实现计时器时,如果嵌套层级超过 5 层,至少有4毫秒的偏差。
4,受事件循环的影响,计时器的回调函数只能在主线程空闲时运行,因此又带来了偏差
因此不能够准确计时。 
也就是说:setTimeout,setInterval,的计时是不准确的。

计时器嵌套层级超过 5 层,至少有4毫秒的偏差的解释

setTimeout(function(){
  setTimeout(function(){
    setTimeout(function(){
      setTimeout(function(){
        setTimeout(function(){
          // 这个延时器在第6层,超过了5层,即使我们延时的是0毫秒;
          // 最终也会被修改为4毫秒后执行
          setTimeout(function(){

          },0)
        },0)
      },0)
    },0)
  },0)
},0)

单线程是异步产生的原因。

事件循环是异步的实现方式

posted @ 2024-01-26 12:54  南风晚来晚相识  阅读(224)  评论(0编辑  收藏  举报