js代码执行顺序

一、引入

​ 我们都知道js是一种单线程的脚本语言，但是有时竟然会提到js的异步操作，这是什么鬼，单线程竟然会出现异步操作？异步操作不是只有多线程才会有的吗？这一个个问题，让然十分困扰，今天我们就来好好分析一下，js代码执行的顺序。

二、执行原理

​ 首先明确一点，js代码一定是单线程的，同一时间，不可能同时运行两个js代码。我们一直说的异步，并不是js的异步而是浏览器的异步。 一些I/O操作、定时器的计时和事件监听（click, keydown…）等都是由浏览器提供的其他线程来完成的。这就解释清楚了异步的定义。

三、执行过程

1. 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
2. 主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
3. 一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4. 主线程不断重复上面的第三步

• 事件队列会将处理事件的优先级进行排序，再通过执行栈来执行事件
• 其实同步和异步，无论如何，做事情的时候都是只有一条流水线（单线程）

通俗的解释就是，单线程 js 每次只能执行一个任务，当出现异步操作且 js 还没有干完手中的工作，这时异步操作先别着急，现在任务队列里按照优先级排队，当 js把手头的活干完后，然后对任务队列说：行了，再来一批活吧。这时任务队列把队列所有任务按照排好的顺序交给 js执行。在放走一批任务之后，队列又开安排下一批等待执行的任务。

四、浏览器线程

刚刚我们知道了异步是浏览器的异步，那么异步操作有哪些呢？

• 事件监听 - addEventListener
• 定时器 - setTimeout /setInterval
• ajax - 异步请求
• GUI渲染也是在引擎线程中执行的，脚本中执行对界面进行更新操作, 如添加结点, 删除结点或改变结点的外观等更新并不会立即体现出来, 这些操作将保存在一个队列中, 待JavaScript引擎空闲时才有机会渲染出来。
• ……

异步操作，触发来源于js代码，执行在浏览器的其他线程，回调函数又加入js队列。

通俗解释一下，就是 js 读到 addEventListener()时,会要求浏览器启动另外一个线程，来监控添加的事件，一旦发现事件被触发，马上将回调函数添加到任务队列中。