浏览器事件循环之宏任务和微任务

JavaScript014

浏览器事件循环之宏任务和微任务,第1张

node 事件循环见: https://www.jianshu.com/p/69d2b70d3163 。

参考: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/?utm_source=html5weekly

we don't add another mutation microtask as one is already pending

三个概念: JS堆栈、宏任务、微任务。

js 是一个单线程语言。

在执行一个js文件的过程中, js堆栈 中一直有任务,执行过程中,如果碰到了 宏任务 或者 微任务 ,会将其分别放入 宏任务队列 微任务队列 中。

当js文件被执行完, js堆栈 为空,此时执行 微任务队列 中的所有任务。当执行 微任务 过程中碰到 宏任务 或者 微任务 ,同样会将其分别放入 宏任务队列 微任务队列 中。

微任务队列 为空,此时执行 宏任务队列 中的所有任务。在执行过程中

宏任务按顺序执行,且浏览器在每个宏任务之间渲染页面

所有微任务也按顺序执行,且在以下场景会立即执行所有微任务:

例子:

执行结果:(Chrome 89)

1、首先预备好外部想要引入的外部文件,命名为util.js,并且填充固定的文件内容(普通是固定的库)。

2、其次打开util.js ,持续填写重要内容将要利用的方法用module.exports给暴显露来。

3、然后将外部js放在指定的文件夹utils里(utils 规定寄存js库和数字格式化文件)。

4、最后在想要用到这个方法的js里面 require这个js,然后调用即可。

1、创建一个文件夹,这个文件夹有一个js文件夹和一个html文件。js文件夹用来存放需要引入的js文件。

2、打开html文件,在html文件上找到<body>,在<body>标签里创建一个按钮标签,然后给这个标签添加一个点击addJs事件。

3、在js文件夹下创建一个js文件为addJs.js。

4、在addJs.js文件上输入一个alert弹出框并保存,当引入js文件成功就会执行alert弹出框。

5、回到html文件,在按钮输入框后面创建一个script标签,然后添加用来引入addJs.js文件的addJs事件。

6、保存html文件后使用浏览器打开,点击按钮即可看到出现一个弹出,表示引入js文件成功。