JS引擎（运行机制）【黑马web前端】

更新时间:2019年07月26日 11时17分43秒 来源:黑马程序员论坛

1.JS引擎 js 引擎是用来解释和执行js代码。 2.js引擎的执行机制 1.js是单线程语言 2.js需要异步 如果JavaScript中不存在异步, 只能自上而下执行, 如果上一行解析时间很长, 那么下面的代码就会被阻塞.对于用户而言, 阻塞就意味着 "卡死", 这样就导致了很差的用户体验.所以, JavaScript中存在异步执行 3.js如何实现异步 EventLoop(任务队列/事件循环) - 1.所有的同步任务都在主线程上执行形成一个执行栈（stack）； - 2.主线程之外还存在一个任务队列（Event Loop）,异步任务在event table中注册函数，当满足触发条件（即dom、ajax、setTimeout、setImmediate有返回结果了）后，被推入任务队列（Event Loop）。一旦主线程上的同步任务执行完成开始，系统就会开始读取任务队列（Event Loop）， 看看里面有哪些对应得异步任务，于是结束等待状态，进入执行栈，开始执行。 - 3.主线程不断执行上面的第3步 console.log(1) setTimeout(         function() {                 console.log(2)         },         0) console.log(3) 运行的结果是：1，3，2 代码分析： 1.console.log(1)是同步任务，放入主线程里 2.setTimeout是异步任务，被放入event table，0秒之后被推入任务队列(Event Loop)里 3.console.log(3)是同步任务，放到主线程里. 当1，3在控制台被打印后，主线程去Event Loop(事件队列)里查看是否有可执行的函数，执行setTimeout里的函数，这就是Event Loop Event Loop 主线程从任务队列(Event Loop) 中读取事件, 这个过程是循环不断的, 所以整个的这种运行机制又称为Event Loop(事件循环). 除了广义的定义同步任务和异步任务还有： 1.macro-task(宏任务)：包括整体代码script，setTimeout，setInterval，setImmediate 2.micro-task(微任务)：Promise，process.nextTick，Object.observe(已废弃)、 MutationObserver 1. 宏任务：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。 2. 微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。 3. 宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。 事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。听起来有点绕，我们用一段代码说明 console.log('1'); setTimeout(function() {     console.log('2');     process.nextTick(function() {         console.log('3');     })     new Promise(function(resolve) {         console.log('4');         resolve();     }).then(function() {         console.log('5')     }) }) process.nextTick(function() {     console.log('6'); }) new Promise(function(resolve) {     console.log('7');     resolve(); }).then(function() {     console.log('8') }) setTimeout(function() {     console.log('9');     process.nextTick(function() {         console.log('10');     })     new Promise(function(resolve) {         console.log('11');         resolve();     }).then(function() {         console.log('12')     }) }) 执行过程 整体script作为第一个宏任务进入主线程，遇到console.log，输出1。 遇到setTimeout，其回调函数被分发到宏任务Event Queue中。我们暂且记为setTimeout1。 遇到process.nextTick()，其回调函数被分发到微任务Event Queue中。我们记为process1。 遇到Promise，new Promise直接执行，输出7。then被分发到微任务Event Queue中。我们记为then1。 又遇到了setTimeout，其回调函数被分发到宏任务Event Queue中，我们记为setTimeout2。 宏任务Event Queue 微任务Event Queue setTimeout1 process1 setTimeout2 then1 上表是第一轮事件循环宏任务结束时各Event Queue的情况，此时已经输出了1和7。 我们发现了process1和then1两个微任务。 执行process1,输出6。 执行then1，输出8。 好了，第一轮事件循环正式结束，这一轮的结果是输出1，7，6，8。 那么第二轮时间循环从setTimeout1宏任务开始： 首先输出2。接下来遇到了process.nextTick()，同样将其分发到微任务Event Queue中，记为process2。new Promise立即执行输出4，then也分发到微任务Event Queue中，记为then2。 宏任务Event Queue 微任务Event Queue setTimeout2 process2 then2 第二轮事件循环宏任务结束，我们发现有process2和then2两个微任务可以执行。 输出3。 输出5。 第二轮事件循环结束，第二轮输出2，4，3，5。 第三轮事件循环开始，此时只剩setTimeout2了，执行。 直接输出9。 将process.nextTick()分发到微任务Event Queue中。记为process3。 直接执行new Promise，输出11。 将then分发到微任务Event Queue中，记为then3。 宏任务Event Queue 微任务Event Queue process3 then3 第三轮事件循环宏任务执行结束，执行两个微任务process3和then3。 输出10。 输出12。 第三轮事件循环结束，第三轮输出9，11，10，12。 整段代码，共进行了三次事件循环，完整的输出为1，7，6，8，2，4，3，5，9，11，10，12。==(请注意，node环境下的事件监听依赖libuv与前端环境不完全相同，输出顺序可能会有误差)

推荐了解热门学科

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。




黑马程序员热门视频教程【点击播放】