最简单理解js执行流程

最简单理解js执行流程

JavaScript 执行部分主要分三个阶段

阶段一

	最基本的代码片段
	```
	console.log('事件 start ');
	```

阶段二

		async  /await  Promise

阶段三

	dom执行事件  setTimeout  setInterval

结论

JS是单线程执行的语言，在同一个时间只能做一件事情。这就导致后面的任务需要等到前面的任务完成才能执行，如果前面的任务很耗时就会造成后面的任务一直等待。为了解决这个问题JS中出现了同步任务和异步任务。

同步任务:

在主线程上排队执行的任务只有前一个任务执行完毕，才能执行后一个任务，形成一个执行栈。

异步任务:

不进入主线程，而是进入任务队列，当主线程中的任务执行完毕，就从任务队列中取出任务放进主线程中来进行执行。由于主线程不断重复的获得任务、执行任务、再获取再执行，所以者种机制被叫做事件循环（Event Loop）

我们都知道 Js 是单线程的，但是一些高耗时操作带来了进程阻塞的问题。为了解决这个问题，Js 有两种任务的执行模式：同步模式（Synchronous）和异步模式（Asynchronous）

在异步模式下，创建异步任务主要分为宏任务与微任务两种。ES6 规范中，宏任务（Macrotask） 称为 Task， 微任务（Microtask） 称为 Jobs。

案例

console.log('事件 start '); 1
 async function async1 (){
    await async2();
    console.log('asyns1 end'); 4
 }

 function async2 (){
    console.log('asyns2 end'); 2
 }

 async1(); 
 
 setTimeout(function(){   
console.log('定时器 start1'); 7
 },0)

 new Promise(function(resolve,reject){
    console.log('执行1'); 3
    resolve()
 }).then(function(res){
    console.log('执行2');5
 }).then(function(res){
    console.log('执行3');6
 }).catch(function(err){
    console.log(err);
 })

控制台输出
事件 start
asyns2 end
执行1
asyns1 end
执行2
执行3
定时器 start1