关于前端:聊聊刚入行也能理解的JavaScript运行机制

前言

大家好，我是梁木由，一个有想头的前端。JavaScript知识点真是无穷无尽，明天来了解下JavaScript运行机制。

JavaScript单线程机制

JavaScript是一门单线程语言，就注定它同一时间内就只能做一件事，只能自上而下执行，那么如果上一行解析工夫很长，那上面代码就会被阻塞，那对用户而言体验感是十分不敌对的。于是JavaScript呈现了同步工作和异步工作。

JavaScript事件循环

同步

程序的执行程序与工作的排列程序是统一的、同步的。比方要烧水煮饭，需等水开了，再去煮

异步

在做这件事的同时，你还能够去解决其余事件。比在烧水的同时，能够去切菜

看看同步工作与异步工作的执行过程

咱们先来看一个问题

setTimeout(() => {
  console.log('setTimeout')
})
​
new Promise((resolve) => {
  console.log('promise')
  resolve()
}).then(() => {
  console.log('then')
})
​
console.log('console')

根据上述，那么执行后果应该是

promise
console
setTimeout
then

哎不对呀，与理论输入后果不相符

promise
console
then
setTimeout

宏工作与微工作

咱们晓得，尽管都是异步工作，然而promise和setTimeout却是不同的异步工作，异步工作有两种

• 宏工作（script，setTimeout，setInterval，Ajax，UI渲染，I/O，postMessage等）
• 微工作（promise，process.nextTick）

不同的工作也会进入不同的队列中，所以在执行异步工作时也会进入不同的事件队列

这样的话，就了解为什么输入后果是

promise
console
then
setTimeout

事件循环

那给组合一下看看整体的事件循环机制

总结

• 异步工作分类：宏工作，微工作
• 同步工作和异步工作别离进入不同的执行”场合”
• 先执行主线程执行栈中的宏工作
• 执行过程中如果遇到微工作，进入Event Table并注册函数，实现后移入到微工作的工作队列中
• 宏工作执行结束后，立刻执行以后微工作队列中的所有微工作（顺次执行）
• 主线程会一直获取工作队列中的工作、执行工作、再获取、再执行工作也就是常说的Event Loop(事件循环)。