js的单线程特点
说到event-loop,就不得不先说起js的单线程特点。所谓单线程,也就是在同一时间只能做一件事。那么为什么js要设计为单线程呢?
其实这跟js的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?
所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。
为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。
event-loop里面的几个主角
1. 调用栈(Call Stack)
调用栈负责执行js里面的同步代码,所有代码按照顺序从上往下依次执行,当此处代码执行完毕后,就回去回调队列里面查看是由有需要执行的事件,有则拿到调用栈里继续执行,如此循环。
2.回调队列/任务队列(Callback Queue)
存放着属于Web Apis里面,已经到了可执行时机的事件的回调函数,例如时间已到的计时器(setTimeout…),ajax请求的结果,绑定并被触发了的事件(click,load…)
3.Web Apis
是一套由浏览器提供的操作浏览器功能和页面元素的api,大多都是一些方法(函数),一般都有输入和输出(函数的传参和返回值)
最简单的event-loop
介绍完所有主角,先简单看一个最简单的例子。
console.log(1);
setTimeout(() => {
console.log(2)
}, 1000)
console.log(3)
宏任务和微任务
异步任务分为宏任务和微任务。他们也有相对应的宏任务队列和微任务队列。(可以理解为两种队列合在一起统称任务队列或循环队列)
宏任务包含script,setTimeout,DOM事件,ajax等。
微任务有Promise(部分浏览器将此认定为宏任务),async/await等
通常来讲,微任务执行顺序是在宏任务之前的。
DOM渲染的时机
如果js代码有改变DOM元素的代码,那么DOM元素会在何时进行渲染呢?
<script>
const p1 = "<p>我是p标签</p>"
document.querySelector("body").innerHTML = p1
alert('同步代码执行完毕')
setTimeout(() => {
alert('异步代码宏任务执行完毕')
})
Promise.resolve().then(() => {
alert('异步代码微任务执行完毕')
})
</script>
执行上诉代码会发现DOM渲染是微任务执行完成后进行的。
总结
1、执行整个代码块(此处有人认为是将代码块认定为宏任务执行,有人不这么认为)
2、遇到setTimeout宏任务时,将其交给webapi,虽然没有设置延时,但是浏览器规定最低4ms,4ms后,setTimeout的回调进入宏任务队列中,等待被调用。
3、遇到Promise这类微任务时,交给webapi处理,因为直接resolve了,所以将then的回调函数放入微任务队列中。
4、此时第一个宏任务(最外层代码块)执行完成,注意此时,系统会先去微任务队列中取出任务依次放到执行栈中执行。然后就是进行DOM渲染,最后就是宏任务队列里面的代码。