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

4次阅读

共计 985 个字符,预计需要花费 3 分钟才能阅读完成。

前言

大家好,我是梁木由,一个有想头的前端。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

宏工作与微工作

咱们晓得,尽管都是异步工作,然而 promisesetTimeout却是不同的异步工作,异步工作有两种

  • 宏工作(scriptsetTimeoutsetIntervalAjax,UI 渲染,I/OpostMessage等)
  • 微工作(promiseprocess.nextTick

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

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

promise
console
then
setTimeout

事件循环

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

总结

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