JS中的同步异步编程

简单来说：

  • 同步 sync：事情必须一件一件的去做，上一件事情没有处理完，下一件事情是无法处理的
  • 异步 async：同时处理多件事情或者是上一件事情哪怕没有处理完，下一件事情也可以继续处理

线程和进程

进程：一个程序(或者浏览器打开一个页面)是开辟一个进程 线程：线程是进程中具体办事的，想同时办多件事，就需要开辟多个线程（一个进程中包含多个线程）

浏览器是多线程的，可以同时处理很多任务

  • GUI渲染线程：渲染HTML/CSS代码的，最后在页面中绘制出图形「GPU显卡」
  • JS引擎线程：渲染和解析JS的
  • 事件触发线程：监听事件是否触发的
  • 定时器触发线程：监听定时器是否到达时间的
  • 异步HTTP请求线程：用来从服务器获取资源文件或者数据的（link/script/img/ajax…）
  • WebWorker
  • …

JS是单线程的

因为浏览器只会分配一个线程(JS引擎线程)去渲染和解析JS，所以在JS中大部分代码都是同步的 JS中有部分异步编程的代码

  • 异步微任务
    • requestAnimationFrame 「有争议」
    • Promise.then/catch/finally
    • async/await
    • queueMicrotask 创建微任务
    • IntersectionObserver
    • MutationObserver
    • process.nextTick「Node」
    • …
  • 异步宏任务
    • 定时器 setTimeout/setInterval
    • 事件绑定/队列
    • XMLHttpRequest(ajax)/Fetch
    • MessageChannel
    • setImmediate「Node」

setImmediate Node中新提供的定时器 [异步宏任务]

  1.   - 在同步代码中设置的setImmediate ，等价于setTimeout的时间设置为零
  2.   - 但是如果是在某一个异步任务执行的时候设置的setImmediate 则它是异步宏任务队列中优先级最高的
  3.   -  ...
// 循环是同步的
console.time('AA');
for (let i = 0; i < 999999; i++) {}
console.timeEnd('AA');
console.log('OK'); 

// 避免死循环：死循环会占用JS引擎线程，导致这个线程无法再去处理其它的程序
while (1) {}
console.log('OK'); 

console.log(1);
setTimeout(() => {
    console.log(2);
}, 0); //浏览器有最快的反应时间，定时器“时间因子(设定的等待时间)”设置为0也不是立即执行，谷歌下最少也要等5~7MS(IE需要等待10~17MS)
console.log(3);
for (let i = 0; i < 99999999; i++) {} //循环完大概需要100MS
console.log(4);

JS单线程异步

  • 浏览器为了在JS这种单线程操作中，实现出异步的效果，默认提供两个 队列

    • WebAPI 任务监听队列【监听任务是否执行】
    • EventQueue 任务/事件等待队列【能够执行的异步任务 都会在这个队列中 排队等待执行】

      重要的知识

  • -1）因为JS是单线程的，所以一次只能做一件事情；当我们把异步任务放在WebAPI中去监听的时候，此时主线程继续渲染同步的JS代码【单线程异步操作】

  • -2）在同步代码还没有执行完成之前(主线程还没空闲下来)，哪怕某个异步任务可以执行了，也不会立即执行这个异步任务，而是把它放置到EventQueue中 排队执行！”只有同步代码执行完成，才会执行异步的任务”
  • -3）当同步任务执行完，主线程空闲下来之后，会去EventQueue中，查找能够执行的异步任务，把其放到栈内存中，让主线程去执行（此时主线程又开始忙了）；等到这个异步执行完，再去EventQueue中找其余的异步任务，拿过来执行…这就是JS中非常重要的机制”EventLoop事件循环机制”
    • 如果有可执行的异步微任务，永远都是先找微任务执行；可执行的微任务没有了，再去找异步的宏任务
    • 同等级的任务，谁先放进来，就先执行谁

1.png

思考题

1）

setTimeout(() => {
    console.log(1);
}, 20);
console.log(2);
setTimeout(() => {
    console.log(3);
}, 10);
console.log(4);
console.time('AA');
for (let i = 0; i < 90000000; i++) {
    // do soming
}
console.timeEnd('AA'); //=>AA: 79ms 左右
setTimeout(() => {
    console.log(6);
}, 8);
console.log(7);
setTimeout(() => {
    console.log(8);
}, 15);
console.log(9);

2.png