玩转JS的执行机制

整体大纲

JS单线程的原因同步和异步的概念微任务和宏任务Event Loop

一、为什么JS是单线程

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

二、同步和异步

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

三、微任务和宏任务

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

四、Event Loop

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

所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入主线程开始执行。 主线程不断地重复上边的操作，这种执行机制称之为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执行完成–>定时器开始执行 结语：可以多找几道练习题理解理解思路，如果我有说的不对的地方，欢迎各位大佬指出。