1. JS 是单线程
- JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。
- 这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。
- 比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后再删除。
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。
这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
问题:
以下代码执行的结果是什么?
console.log(1); // 先打印1
setTimeout(function () {
console.log(3); // 1s钟之后打印3
}, 1000);
console.log(2);
// 如果是单线程,这个代码只有在打印3之后,才打印2。 时间比较久,需要等待上个定时器执行完成
// 如果是多线程,就会打印1,直接打印2,再去打印3 (实际打印:1,2,3)
那么单线程,多线程是什么呢?继续往下走:
2. 同步任务和异步任务
单线程导致的问题就是后面的任务等待前面任务完成,如果前面任务很耗时(比如读取网络数据),后面任务不得不一直等待!!
为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制。于是,JS 中出现了同步任务和异步任务。
同步
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。
异步
你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
JS中所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。 同步任务指的是: 在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务; 异步任务指的是: 不进入主线程、而进入”任务队列”的任务,当主线程中的任务运行完了,才会从”任务队列”取出异步任务放入主线程执行。
理解:
同步,不是两件事情同时去做,而是先做一件事情,然后再做另一件事情。他是单线程,一个人依次做多件事情
异步,是两件事情同时去做,他是多线程,多个人同时做多个事情
同步任务,异步任务
再来看一个问题:
console.log(1);
setTimeout(function() {
console.log(3);
}, 0);
console.log(2);
// 结果还是1,2,3
// 为啥呢?继续往下走:
我们来看一下同步任务和异步任务:
了解完这一块之后,我们知道了刚刚的问题代码中,setTimeout的回调函数,是异步任务,放到任务队列了,但是为啥后执行呢?继续往下走:
3. JS执行机制
3.1 执行顺序
- 先执行执行栈中的同步任务。
- 异步任务(回调函数)放入任务队列中。(但是不执行回调函数)
- 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
如图:
3.2 事件循环
问题:
console.log(1);
document.onclick = function () {
console.log('click');
}
console.log(2);
setTimeout(function () {
console.log(3)
}, 3000)
分析过程:
-
此代码中有两个异步任务,我们先给同步代码和异步代码分开:
-
当主线代码执行完了之后,1,2打印完了。
-
3s之后,定时任务时间到了,就将fn放到异步任务的任务队列中了:
-
然后执行异步任务的打印3。最终出现1,2,3。
-
如果setTimeout的回调函数的任务执行完成,异步任务队列就为空了。
-
如果此时点击了document,onclick的回调函数就放到异步任务了
-
然后执行,最终出现1,2,3,click
-
执行完了,异步任务又会清空
-
最后有个注意事项,主线程代码执行完成之后,会反复去异步任务中看是否有任务需要执行
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop)。
事件循环综合图:
3.3 代码思考题
console.log(1);
document.onclick = function() {
console.log('click');
}
setTimeout(function() {
console.log(3)
}, 3000)
console.log(2);
4.宏观任务和微观任务
4.1 宏观任务:
宿主发起的任务为宏观任务,如script(整体代码)、setTimeout、setInterval、setImmediate、I/O、ajax、UI交互事件、postMessage、MessageChannel
4.2 微观任务:
JavaScript引擎发起的任务为微观任务,如Promise.then、MutationObserver、process.nextTick(Node.js 环境)的意思就是定义出一个动作,并且让这个动作在下一个事件轮询的时间点上执行
如何分析异步执行的顺序
-
首先我们分析有多少个宏任务;
-
在每个宏任务中,分析有多少个微任务;
-
根据调用次序,确定宏任务中的微任务执行次序;
-
根据宏任务的触发规则和调用次序,确定宏任务的执行次序;
-
确定整个顺序;
如下代码解析:
<script type="text/javascript">
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})`
</script>
第一个宏观任务:
- 第一个宏观任务script 作为整体进入主线程 遇到console.log(‘1’) 输出1
- 遇到setTimeout,宏观任务(现在第一个宏观任务script还没有执行完毕 会分配到宏观任务中 暂时还不会执行)
- 遇到下面的process.nextTick 分配到微观任务中
- 遇到Promise,new Promise直接执行,输出7。then被分发到微任务Event Queue中 5.此时的微观任务表中:process.nextTick,Promise.then 则执行结果为 6 8
第一个宏观任务 执行结果 : 1 7 6 8
第二个宏观任务:
- 第二个宏观任务是第一个setTimeout
- 跟script的执行顺序是一样的 碰到console.log(‘2’) 执行2 process.nextTick会分配到微观任务 Promise会立即执行 然后.then分配到微观任务
输出结果:2 4 3 5
第三个宏观任务:
第三个宏观任务就是第二个setTimeout 和第二个宏观任务执行顺序一样
输出结果 9 11 10 12