玩转JS的执行机制

整体大纲

1. JS单线程的原因
2. 同步和异步的概念
3. 微任务和宏任务
4. Event Loop

一、为什么JS是单线程

众所周知，js是一门单线程语言，也就是一次只能干一件事。其实主要原因是因为JS的用途，JS的主要作用是用来网页交互以及操作DOM，假设有两个线程，一个是添加DOM元素，另一个是删除DOM元素那么到底该以哪个为准呢。

二、同步和异步

Js作为单线程语言，就意味着任务必须一个一个执行，但是又会遇到的问题就是如果前一个任务过大，后边的任务就会等待直到前边的任务执行完毕。所以有了同步任务个异步任务的概念。同步任务是指在主线程上执行的任务，必须等到前一个任务执行完毕后边的任务才可以执行，而异步任务是指不进入主线程，而是将恩任务添加到任务队列(task queue),只有任务队列通知主线程某个异步任务可以开始执行了，才会执行。

三、微任务和宏任务

而任务队列也分为微任务和宏任务。
微任务主要包含：promise，async，await
宏任务主要包含：定时器，事件绑定
执行顺序：微任务先执行

四、Event Loop

综合上边所说，js执行步骤大概为一下几步

1. 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
2. 主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
3. 一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入主线程开始执行。
   主线程不断地重复上边的操作，这种执行机制称之为Event Loop
   如果看的懂上边的操作来看一段代码整理一下刚才的知识,
   仔细想想打印的结果是什么呢

       async function() {
		console.log('异步函数1');
	    await f2()	
			console.log('f1结束');
		}
		async function f2() {
		  console.log('异步函数2')
		}
		console.log('js开始执行');
		setTimeout(function () {
		  console.log('定时器开始执行');
		},0)
		f1()
		new Promise(function (resolve) {
		  console.log('promise');
			resolve()
		}).then(()=>{
		  console.log('promsie执行完毕');
		})
		console.log('js执行完成')
		

所以最后的打印结果为：js开始执行–>异步函数1–>异步函数2–>promise’–>js执行完成–>f1结束–>promise执行完成–>定时器开始执行
结语：可以多找几道练习题理解理解思路，如果我有说的不对的地方，欢迎各位大佬指出。