JavaScript 为什么是单线程的?JavaScript 为什么需要异步?JavaScript 单线程又是如何实现异步的?
1.JavaScript 为什么是单线程的?
现在有 2 个线程 process1 process2,假设 JavaScript 是多线程的,所以他们可以对同一个 dom 同时进行操作。process1 删除了该 dom,而 process2 编辑了该 dom,同时下达 2 个矛盾的命令,浏览器究竟该如何执行呢?这样想,JavaScript 为什么被设计成单线程应该就容易理解了吧。
2.JavaScript 为什么需要异步?
如果 JavaScript 中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验,所以 JavaScript 中存在异步执行。
3.JavaScript 单线程又是如何实现异步的呢?
通过一个题看一下
setTimeout(function () { console.log(1) }, 0) Promise.resolve(function () { console.log(2) }) new Promise(function (resolve) { console.log(3) }) console.log(4) // 上述代码的输出结果是什么???
解释
// 遇到 setTimeout 将 setTimeout 回调放入宏任务队列中 setTimeout(function () { console.log(1) }, 0) // 遇到了 promise,但是并没有 then 方法回调 // 所以这句代码会在执行过程中进入我们当前的执行上下文 紧接着就出栈了 Promise.resolve(function () { console.log(2) }) // 遇到了一个 new Promise,Promise 有一个原则就是在初始化 Promise 的时候Promise 内部的构造器函数会立即执行, // 因此在这里会立即输出一个 3,所以这个 3 是第一个输出的 new Promise(function (resolve) { console.log(3) }) // 然后第二个输出 4 当代码执行完毕后回去微任务队列查找有没有任务, // 发现微任务队列是空的,那么就去宏仁务队列中查找,发现有一个我们刚刚放进去的setTimeout 回调函数, // 那么就取出这个任务进行执行,所以紧接着输出1 console.log(4)
答案 ==》 3 4 2 1
任务队列
当遇到一个异步事件后,JavaScript 引擎并不会一直等待异步事件返回结果,而是会将这个事件挂在与执行栈不同的队列中,我们称之为任务队列。
这些任务又被细分为宏任务和微任务
在主线程的任务 全部执行完毕,就会清空微任务,然后去宏任务队列中取出一条宏任务,放在主任务中执行,主任务执行完毕,清空微任务,再去宏任务中取任务,一直循环执行,
宏任务(macrotask):script(全局任务),setTimeout ,setInterval ,setImmediate (node.js 独有),I/O(磁盘读写或网络通信) ,UI rendering(UI交互事件)
微任务(microtask):process.nextTick (node.js 独有), Promise.then