本文实例讲述了JavaScript运行机制。分享给大家供大家参考，具体如下：第一次写博客目前研一第二学期，大二开始入门前端，然而长久以来都是对于框架的简单调用，并未对其进行深入研究，因此，这个博客是作为自我督促的开始。这篇博客的内容源于前段时间写一个微信小程序前端，发现页面的渲染顺序总与自己的预想相违背，因此近期看了一些关于JavaScript运行机制的博客及文档，有了一些基本的框架，接下来就来详细看一下我所了解到的内容。JavaScript执行顺序首先，JavaScript是按照顺序，一行一行执行的，且JS只有一条线程，即不可能进行两条代码同时执行，也就是说，在一条代码执行时，它后面的所有代码都需要等待，直到该代码执行结束，后面的才能继续执行。如果是这样，就会导致用户体验度极其不好，例如一个请求发送给服务器，后续代码就会一直等待，直到服务器返回结果，用户才能进行新的操作。这又是怎么回事呢？详细解释JavaScript执行机制JavaScript执行栈JavaScript是以压栈的方式进行代码的执行的，一开始执行时栈内为空，当执行开始，JS引擎会将代码放入栈底，若该代码包含其他函数的调用，则将被调用的函数放在栈顶，若该代码未包含其他函数的调用，则执行该函数，执行完成后出栈，以此类推，最终直到栈为空。JavaScript的同步任务和异步任务事实上，真正的JS内部分为同步任务和异步任务，然而这并没有改变JS单线程的特征。

同步任务：执行后直接返回结果，例：console.log()；c = a + b

异步任务：执行后无法立刻返回结果，需要等待一定时间，才能执行回调函数，对返回结果进行操作
同步任务：执行后直接返回结果，例：console.log()；c = a + b异步任务：执行后无法立刻返回结果，需要等待一定时间，才能执行回调函数，对返回结果进行操作系统来说，JS存在一个主线程，它会首先执行所有同步任务，而异步任务都会先进行注册，然后主线程不会等待异步任务执行结果的返回，而是继续执行下面的同步任务（在此过程中，如果异步任务返回结果，接下来的回调函数会放在Event Queue中等待），直到同步任务全部执行完毕，主线程就会从Event Queue读取任务进行执行。该过程会不断循环，即事件循环Event Loop。事件循环是如何发生的不觉得奇怪吗，如果按照上述同步任务和异步任务的执行方式，那不是一轮就可以执行完毕吗，又何来的Event Loop？这是个小细节，异步任务存在多个时，每一个异步任务返回的结果所需的时间都是不同的，这就存在Event Queue以先进先出的形式将返回结果进行排队，第一个异步任务返回结果，那么就将其放在队列的首位，接下来的异步任务紧随其后，就这样排成一队。当主线程空闲时（即同步任务执行完毕后），便从Event Queue中读取事件，放入主线程执行。而循环来自于，当Event Queue执行完毕后，过了一段时间，又有之前的异步任务返回结果，放到Event Queue中，监控器检测到Event Queue为非空，主线程又开始执行Event Queue中的任务。宏任务和微任务在解释定义之前，我们先对异步任务进行说明：

对服务器的异步请求：最常见的异步任务，这涉及前后端的交互，需要服务器对请求进行处理，并返回请求结果

setTimeout和setInterval：延时操作，后者为循环操作（都涉及延时值）

Promise：JS用来处理异步操作的对象

process.nextTick(callback)：类似node.js版的"setTimeout"，在事件循环的下一次循环中调用 callback 回调函数。
对服务器的异步请求：最常见的异步任务，这涉及前后端的交互，需要服务器对请求进行处理，并返回请求结果setTimeout和setInterval：延时操作，后者为循环操作（都涉及延时值）Promise：JS用来处理异步操作的对象process.nextTick(callback)：类似node.js版的"setTimeout"，在事件循环的下一次循环中调用 callback 回调函数。广义上JS分为同步任务和异步任务，在此对任务进行更精细的定义：

macro-task(宏任务)：包括整体代码script，setTimeout，setInterval

micro-task(微任务)：Promise，process.nextTick
macro-task(宏任务)：包括整体代码script，setTimeout，setIntervalmicro-task(微任务)：Promise，process.nextTick在此，之所以提出宏任务和微任务，是为了更好的理解事件循环！执行过程：

主线程会按顺序先执行第一次循环的宏任务，然后将第一次循环遇到的微任务放入微任务的Event Queue中，将遇到的宏任务放入宏任务Event Queue中，在此特别注意！！第一次循环的宏任务是整体script代码！！；

然后后执行微任务的Event Queue；

第二次循环时，会从宏任务的Event Queue中取出第一个宏任务，然后执行当前宏任务中包含的代码，同样将遇到的微任务放入微任务的Event Queue中，将遇到的宏任务放入宏任务Event Queue中；

再执行当前微任务的Event Queue中的任务；

第三次循环，从宏任务的Event Queue中取出第二个宏任务…(以此循环)
主线程会按顺序先执行第一次循环的宏任务，然后将第一次循环遇到的微任务放入微任务的Event Queue中，将遇到的宏任务放入宏任务Event Queue中，在此特别注意！！第一次循环的宏任务是整体script代码！！；然后后执行微任务的Event Queue；第二次循环时，会从宏任务的Event Queue中取出第一个宏任务，然后执行当前宏任务中包含的代码，同样将遇到的微任务放入微任务的Event Queue中，将遇到的宏任务放入宏任务Event Queue中；再执行当前微任务的Event Queue中的任务；第三次循环，从宏任务的Event Queue中取出第二个宏任务…(以此循环)简而言之，就是先执行宏任务，再执行微任务，特别注意两点即可：特别注意两点

第一次循环的宏任务是整体script代码

宏任务队列是一次循环执行一条宏任务
第一次循环的宏任务是整体script代码宏任务队列是一次循环执行一条宏任务这里看个例子：
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')

})
})

//作者：ssssyoki
//链接：https://juejin.im/post/59e85eebf265da430d571f89
//来源：掘金


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')

})
})

//作者：ssssyoki
//链接：https://juejin.im/post/59e85eebf265da430d571f89
//来源：掘金

输出顺序为：
1，7，6，8，2，4，3，5，9，11，10，12
1，7，6，8，2，4，3，5，9，11，10，12总结在此博客中，或许包含一些你未曾听过的名词或方法，我并未对其进行详细解释。之所以如此，是由于，于我个人，在看一些资料时，经常遇到不懂的东西，我会选择自己进行查阅和理解，这样更有效于记忆和通透的理解，就跟查单词是一样的，如果文本里直接告诉你，反而不会重视。感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》JavaScript操作DOM技巧总结JavaScript页面元素操作技巧总结JavaScript事件相关操作与技巧大全JavaScript查找算法技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript错误与调试技巧总结希望本文所述对大家JavaScript程序设计有所帮助。