一、Javascript运行步骤

// 基本概念1、代码块:一个

二、Javascript运行机制

JS引擎会产生两个队列:Macrotask queue和Microtask Queue

task的产生

macrotasks:

script, setTimeout, setInterval, setImmediate, I/O, UI rendering复制代码

microtasks:

process.nextTick, Promise, Object.observe, MutationObserver复制代码

JavaScript引擎运行机制:

默认从Macrotask queue中第一个任务(因为script为Macrotask)启动执行,遇到Macro或Micro task,就添加到对应的queue中;

取出所有的Microtask queue任务,并按顺序执行完所有Microtask;

再次取出下一个Macro queue并执行(同步骤1);

重复2,3

执行结束

说明: 一个task中错误,只影响当前task任务中的后续代码

如:

setTimeout(() => {  console.log('task1');  // aaa 不存在,报错  console.log(aaa);  // 这行不执行,因为被阻断  console.log(22222);}, 1000);// 上一个错误不影响此任务执行setTimeout(() => console.log('task2'), 3000);复制代码

结果:

三、完整示例:

console.log('000');Promise.resolve().then(() => {    console.log(111);    Promise.resolve().then(() => console.log(222));    setTimeout(() => console.log(333));}).then(() => {    console.log(444);});setTimeout(() => {    console.log(555);    Promise.resolve().then(() => console.log(666));});Promise.resolve().then(() => {    console.log(777);    Promise.resolve().then(() => console.log(888));});setTimeout(() => console.log(999));console.log('aaa');复制代码

结果:

000aaa111777222444888555666999333复制代码

图示分析:

①执行主Macrotask,并生成新的队列。

②新的队列。

③执行所有Microtask,并将新的任务添加到对应的队列中,直到所有Microtask queue中的task执行完。

④执行完一个Macrotask,马上去执行Microtask Queue。

⑤重复以上步骤,直到结束。