这次彻底了解JavaScript执行机制 - 网站源码_资源分享

这首诗的目地是为的是让你全盘认知 JavaScript 的继续执行，假如你到责任编辑最终还没认知，你能揍我痛打。

不论你是 JavaScript 初学者却是新手，不论你是在复试组织工作，却是而已做常规性的合作开发组织工作，一般来说会辨认出取值录于标识符，你须要晓得要输入甚么和以甚么次序输入. 虽然 JavaScript 是一类Renderscript词汇，他们能得出结论下列推论：

let a =1;console.log(a);let b =2;console.log(b);

不过，JavaScript 事实上是这种的：

setTimeout(function(){ console.log(start)});new Promise(function(resolve){ console.log(start for); for(var i =0; i <10000; i++){ i ==99&& resolve();}}).then(function(){ console.log(start then)});console.log(end);// Following the idea that JS executes in the order in which the statements appear, I confidently write down the output:// start// start for// start then// end

在 Chrome 上查阅它是全然严重错误的

一、有关 JavaScript

JavaScript 是一类Renderscript词汇。Web-worker 是在新一代的 HTML5中明确提出的，但 JavaScript 是Renderscript的核心理念维持维持不变。因此大部份 JavaScript 版的“多处理器”都是用Renderscript演示的，大部份的 JavaScript 多处理器都是傻子！

二、JavaScript 该事件循环式

虽然 JavaScript 是Renderscript的，它就像两个多于两个询问处的商业银行。顾客须要逐一排队等候办理手续销售业务。

同样，JavaScript 任务也须要两个两个地继续执行。假如一项任务花费的时间太长，则下一项也必须等待。

那么问题来了，假如他们想浏览新闻，但新闻中包含加载缓慢的超高清图像，他们的网页是否应该一直卡住直到图像全然显示？因此聪明的程序员将任务分为两类：

同步任务异步任务

当他们打开两个网站时，页面的渲染过程是很多同步任务，比如渲染页面骨架和页面元素。

须要大量时间的任务，比如加载图片和音乐，都是异步任务。这部分有严格的文字定义，但责任编辑的目地是以最小的学习成本全盘认知实现监督机制，因此他们用一张图来说明：

文字要表达的内容：

同步和异步任务去不同的继续执行“地方”，同步任务去主线程，异步任务去该事件表和注册函数。

当指定的该事件完成时，该事件表将此函数移至该事件队列。

假如继续执行后主线程中的任务为空，该事件队列会读取相应的函数，进入主线程继续执行。

这个过程一遍又一遍地重复，称为该事件循环式。

他们怎么晓得主线程栈是空的？JavaScript 引擎有两个监控进程，不断检查主线程堆栈是否为空，假如是，则检查 Event Queue 以查阅是否有任何函数等待调用。

说了这么多，不如直接写一段标识符：

let data =[];$.ajax({ url:www.javascript.com, data:data, success:()=>{ console.log(success!);}})console.log(end);

这是两个简单的ajax请求标识符：

ajax 去该事件表并注册回调函数成功。继续执行 console.log(‘success’)。ajax Event 完成，回调函数success 进入Event Queue。主线程从该事件队列中读取成功并继续执行。

相信通过上面的文字和标识符，你对JS的继续执行次序有了初步的介绍。接下来，他们来看看进阶话题：setTimeout。

三、爱恨交加超时

著名的 setTimeout 无需进一步解释。setTimeout 的第一印象是异步继续执行能延迟，他们经常这种实现：

setTimeout(()=>{ console.log(‘Delay 3 seconds’);},3000)

当 setTimeout 用得越来越多时，问题也出现了。有时函数会在3 秒的书面延迟后5 或6 秒内继续执行。怎么了？

让他们从两个例子开始：

setTimeout(()=>{ task();},3000)console.log(console);

按照他们之前的推论，setTimeout是异步的，应该先继续执行console.log。

//console//task()

去看看吧！这是正确的！然后他们修改之前的标识符：

复制setTimeout(()=>{ task()},3000)sleep(10000000)

控制台上的 task()在 Chrome 中继续执行须要超过3 秒的时间。

此时，他们须要重新思考setTimeout的定义。

先说上面的标识符是如何继续执行的：

task()进入该事件表并注册，定时器启动。继续执行sleep，非常慢，非常慢，计时继续。task()进入Event Queue，但，sleep太慢无法继续执行。sleep终于结束了，task()终于从Event Queue继续执行到主线程。

上述过程完成后，他们晓得setTimeout是两个在指定时间后将任务添加到Event Queue（本例中为task()）的函数。

而且，虽然是Renderscript任务，须要两个两个继续执行，假如上两个任务耗时过长，他们只能等待。导致实际延迟超过3 秒。

SetTimeout(fn,0)是他们经常遇到的另一个标识符。能立即完成吗？

SetTimeout (fn,0)指定任务将在主线程上最早可用的空闲时间继续执行。这意味着一旦堆栈中的大部份同步任务完成并且堆栈为空，主线程将立即继续执行。例如：

//code1console.log(one);setTimeout(()=>{ console.log(two)},0);// result// one // two//code2console.log(one);setTimeout(()=>{ console.log(two)},3000);// result// one//…3s later// two

有关 setTimeout 要补充的一点是，即使主线程是空的，0毫秒事实上也是无法到达的。根据 HTML 标准，最小值为4 毫秒。有兴趣的同学能自行介绍。

四、恨与爱setInterval

说了 setTimeout，你不能错过它的孪生兄弟 setInterval。它们是相似的，而已后者是循环式继续执行。对于继续执行次序，setInterval 将按指定的时间间隔将注册的函数放入该事件队列中。假如上两个任务耗时过长，也须要等待。

唯一须要注意的是，对于 setInterval(fn,ms)，他们已经晓得不是每 ms 秒继续执行一次 fn，而是每 ms 秒进入 Event Queue。一旦 setInterval 的回调 fn 花费的时间超过了延迟 ms，时间间隔就全然不可见了。请读者细细品味这句话。

五、Promise 和 process.nextTick(callback)

他们已经看过传统的计时器，然后，他们将探讨 Promise 与 process.Nexttick（回调）的性能。

Promise 的定义和功能这里就不介绍了，process.nexttick（回调）类似于node.js 版的“setTimeout”，在该事件循环式的下一次迭代中调用回调函数。

他们开始谈正事吧。除了广义的同步和异步任务，他们对任务有更详细的定义：

宏任务：包括整个标识符脚本、setTimeout 和 setInterval微任务：Promise、process.nexttick

不同类型的任务会进入对应的Event Queue。例如，setTimeout 和 setInterval 将进入同两个该事件队列。

该事件循环式的次序决定了 JS 标识符的继续执行次序。输入整体标识符（宏任务）后，第两个循环开始。然后，继续执行大部份微任务。然后再从宏任务开始，找两个任务队列完成，然后，继续执行大部份的微任务。假如听起来有点绕，他们用责任编辑开头的标识符来说明：

setTimeout(function(){ console.log(setTimeout);})new Promise(function(resolve){ console.log(promise);}).then(function(){ console.log(then);})console.log(console);

此标识符作为宏任务进入主线程。当遇到 setTimeout 时，将其回调函数注册并分发到宏任务 Event Queue。（注册过程同上，下面不再赘述）。然后，遇到两个 Promise，立即继续执行 New Promise，然后将 then 函数分派到微任务该事件队列中。假如遇到console.log()，立即继续执行。好的，整个脚本作为第两个宏任务继续执行。甚么是微任务？他们辨认出 then 是在 microtask Event Queue 中继续执行的。好了，第一轮的 Event loop 已经结束了，让他们开始第二轮，当然是从宏任务 Event Queue 开始。他们在宏任务Event Queue中找到setTimeout对应的回调函数，立即继续执行。结束。

该事件循环式、宏任务和微任务的关系如下图所示：

让他们看一些更复杂的标识符，看看你是否真的介绍 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)})})

第一轮该事件循环式流程分析如下：

整个脚本作为第两个宏任务进入主线程，遇到console.log，打印1。

当遇到 setTimeout 时，它的回调函数被调度到宏任务该事件队列。他们称之为 setTimeout1。当遇到 process.nexttick()时，将其回调函数调度到微任务该事件队列中。他们称它为 process1。假如遇到 Promise，直接继续执行新的 Promise，打印7，然后，分发到微任务 Event Queue，让他们称之为then1。再次遇到setTimeout，它的回调函数被分发到宏任务Event Queue中，他们称之为setTimeout2。

上表展示了第一轮Event loop的宏任务结束时各个Event Queue的情况。这时候已经输入了1和7。他们找到了两个微任务 process1和 then1。继续执行process1，输入6。继续执行 then1 print 8。

好了，第一轮该事件循环式正式结束，本轮结果输入1,7,6,8。因此第二个时间循环式从 setTimeout1宏任务开始：

首先，print2。接下来是process.nexttick()，它也被分派到微任务该事件队列中，称为process2。新的 Promise 立即继续执行输入4，然后也被分发到微任务该事件队列中，记为 then2。

第二轮该事件循环式宏任务完成，他们辨认出 process2和 then2微任务能继续执行。3的输入。5的输入。第二个该事件循环式结束，第二轮输入2,4,3,5。第三个该事件循环式开始，此时只剩下setTimeout2，继续执行。因此它只print 9。将 process.nexttick()分发到微任务该事件队列。记得process 3。只需继续执行 new Promise，print 11。then 分配 microtask Event Queue，记为 then3。