JS 的本质？复读机？忍者！

烦死了！

“你说你们人类烦不烦！前几天一直打开这个网页，今天又来了！” 说着，JavaScript 老大拍了拍脑袋，叹道：“这个网页的 JavaScript 任务，我实在不想接了！再这样下去，我的头发可保不住喽！”

“哎，算了！谁让我不是浏览器的老大呢？干活，干活！” JavaScript 老大拿起一旁的解释器，开始执行 HTML 解析器送来的 JavaScript 代码。

不一会儿，空荡荡的变量大厅开始有了声响，逐渐变得嘈杂起来，甚至传出了吵闹声。

执行大厅的大屏幕上也充斥着当前执行大厅各种各样的信息。

焦急

“叮铃——叮铃——叮铃——” 一旁的电话突然响起，JavaScript 老大顺手按下免提。

“怎么这么慢啊？这都过去好几秒了！我这边还等着继续解析 HTML 呢！” 电话那头传来 HTML 解析器焦急的声音。

“别急啊，你也不是不知道，这个网页前几天就打开过。里面的 JavaScript 代码写得实在不怎么样，还有一个按固定时长空转的 while 循环，你说能快到哪儿去？上面甚至留了条注释，说什么‘加钱再优化体验’，真够离谱的。” JavaScript 老大拿起毛巾擦了擦额头，刚从循环里出来的他还有些发晕。

“行吧，原来又是那个网站，我还以为你业务能力下降了。” HTML 解析器释然道。

“怎么可能？快了，马上就好。”

“行，那你先忙，抓紧哦。” 说完，HTML 解析器挂掉了电话。

“啊，真是累死我了！” 说着，JavaScript 老大伸了个懒腰，背部的骨头啪啪作响，“我的老腰！”

伸完懒腰，JavaScript 老大放下手中的工具，拿起电话拨通 HTML 解析器：“我这边可以了，你继续吧。”

短暂的等待

放下电话，JavaScript 老大走到咖啡机前，按下按钮接了一杯香浓的卡布奇诺，抿了一口，提了提神。

“这个网页可折腾死我了！” 说着，JavaScript 老大放下咖啡，朝 事件大厅走去。

“你这儿有任务进来吗？” JavaScript 老大向管事的小弟问道。

“还没有呢！” 小弟往里瞧了瞧 事件大厅，说道。

JavaScript 老大走进 事件大厅。大厅分成两部分：左侧是 任务队列，右侧是 微任务队列。每执行完一个任务，老大都会先清空当时的微任务队列，再去领取下一个任务。右侧的地板明显更旧，仿佛经历过无数次匆忙的踩踏。

“看来 HTML 解析器也被折腾得够呛！要是普通页面，任务早就排起长队了。”

“什么网页啊，我刚看老大你也在工作台前待了好久呢！”

“哎……” 见任务还没过来，JavaScript 老大便和小弟闲谈起来。

“请问这里是 事件大厅 吗？” 正当 JavaScript 老大和小弟闲聊时，一个任务走了过来，头上顶着大大的 DOMContentLoaded 标志。

“是的，过来登记一下！姓名，来源。” 一看有事件来临，小弟立马回到了工作状态。

“你好，我是 DOMContentLoaded 事件，刚刚由 HTML 解析器派过来。”

“好的，老大这就是第一个事件，领走吧。”

“嗯，有空再谈哈 ~”

“好嘞！” 小弟嘴上答应着，心里却想：“怕是没空了，每次都这样。再说了，还是这个网页……” 想到稍后事件大厅人满为患的样子，他赶紧打起精神。

“不过这个刚来的事件看着挺精神，不知道会和哪个监听函数搭档。” 小弟笑了笑。

另一半！

“来，跟我走吧。” JavaScript 老大对刚来的事件对象说道。

“嗯，我们去哪呢？” 事件对象疑惑道。

“去 变量大厅，找监听你的函数！” JavaScript 老大一脸兴奋。

“组织上还包分配？” 事件对象来了劲，笑脸上出现了浅浅的酒窝。

“那可说不准，先去 变量大厅看看吧。” 说话间，他俩已经来到 变量大厅。

“喂喂喂，大家静静，请监听 DOMContentLoaded 的函数出来！” JavaScript 老大走到看台上，对着话筒说道。

“我！我！我！” 变量大厅的某个角落里，发出了激动的喊声，只见那片区域中有序的坐在好多个函数，他们既不在老生区，也不再新生区，而是一块特殊的空间。

“那你出来跟我走吧！” JavaScript 老大放下话筒。一个函数兴冲冲地跑了上来。

“瞧瞧你这出息！” JavaScript 老大 拍了拍函数的肩膀，说道：“走吧，去我那！”

执行

说话间，三人来到 JavaScript 老大 的 执行大厅。

“躺着吧，让我唤醒你真正的力量！” 老大对进来的函数说道。

“我真正的力量？” 函数疑惑地问道，半信半疑地躺在工作台上。

“开始咯！” 说着，JavaScript 老大按下工作台上的按钮。函数眼中射出两道光芒，投在工作台的白幕上。

“这就是你保存的需要执行的代码了，你自己瞧瞧？”

见工作台没有声响，JavaScript 老大拍了拍脑袋：“忘了，忘了，你这会儿不能说话！哈哈，那就自己感受一下吧。”

“DOMContentLoaded 过来吧，他的执行还需要你的帮助呢！你就呆我旁边，需要我就会喊你。”

“……” 一旁的事件对象明显被眼前发生的事情吓得不轻。

“嘿，别发呆啦！” JavaScript 老大 在事件对象面前挥了挥手。

“哦，哦，老大你说。”

“等下需要你配合！”

“哦，哦，好的。您尽管吩咐。”

吩咐完，JavaScript 老大拿起工作台上的工具，开始执行白幕上的内容。

“把你的 target 属性给我。” JavaScript 老大对 DOMContentLoaded 说道。

“嗯嗯，好的，是 document 对象，我去变量大厅喊他过来。”

“嗯嗯，快去吧！”

...

过了没多久，JavaScript 老大放下手中的工具，长舒一口气：“DOMContentLoaded，感觉怎么样？”

“有点儿累！”

说着老大按了下工作台上的另一个按钮，函数瞬间坐了起来，喊道：“刚刚我的眼睛，放光了！你们看见了吗？放光诶！”

...

“怎么了，你们？怎么不说话？”

JavaScript 老大 与事件对象相视一笑，没说话。

“行了，我还有事，你们回 变量大厅 聊？我也需要去 变量大厅 清理内存了，一起走吧。”

微任务

不一会儿，JavaScript 老大来到事件大厅，DOMContentLoaded 事件对象和函数也回到了对应的位置。

又一轮内存清理结束后，JavaScript 老大赶忙跑到 事件大厅。

“刚刚执行函数时产生微任务了吗？” JavaScript 老大一边问管事小弟，一边瞧向事件大厅右侧，发现那里已经排起了队。

“这么多！”

“对啊！” 管事小弟刚说着，一个暴躁的声音响起：“还要等多久啊！老娘我可等了好久了！”

“这是？” JavaScript 老大 问向管事小弟。

“load 事件呀！今天 load 事件的心情可不太好，不知道为什么？” 小弟在老大耳旁轻声道。

“稍等哈，我需要先把微任务队列给执行咯。”

“那还不赶紧的！我听说今天又没人要我？我这爆脾气！”

“好好好，我抓紧！” 老大赶忙领了个微任务走向了 变量大厅。

“这个任务是谁的，认领一下！”

“我的！我的！” 函数区又出来一个函数。

“走吧！” 老大带着函数再次走向执行大厅。过了一会，清理了变量后，再次走向事件大厅。

如此循环往复，右侧的长队终于慢慢变短，直到当前的微任务队列被清空。

反复横跳

“来下个事件！” JavaScript 老大 喊道。

“我！” 迎面走来了刚刚那个暴躁的事件对象，头上顶着 load。

“哎，你等等，我让你出去时你再出去，别着急！” 事件大厅里的管事小弟跑了出来。

“老大，这是个暴脾气，我...” 小弟进一步解释道。

“没事，跟我走吧！” JavaScript 老大 对 load 事件说道。

不一会，JavaScript 老大 带着 load 来到了变量大厅，喊道：“load 的另一半，出来！”

大厅里，安静了一会，又熙熙攘攘起来。

“没听见吗？我的另一半！赶紧的出来！” load 见没函数站出来，又喊了一句。

……依然没有函数回应。

“那你，就待这吧，我还赶着去取下个事件！” JavaScript 老大 对 load 说道。

“行，那我可要一个个的去看看，老娘凶点怎么了！怕什么呢！一个个的。”

“应该是真的没有……” JavaScript 老大看着这个急脾气的事件，也不敢多说，转身又跑回 事件大厅。

由于 load 并没有对应的函数，事件大厅 右侧并没有新的微任务加入。

“来下一个！” JavaScript 老大 对事件大厅的管事小弟说道。

不一会儿，JavaScript 老大领着下一个任务走出了事件大厅。

又一会，JavaScript 老大 清理了变量大厅。

再过一会儿，JavaScript 老大依次执行完新产生的微任务，事件大厅右侧的队列再次清空。

“来下一个！” JavaScript 老大 对事件大厅的管事小弟说道。

...

整个 JavaScript 大厅里，只见一个忙碌的身影在事件大厅、执行大厅和变量大厅之间来回穿梭，仿佛走进了没有尽头的莫比乌斯环。JavaScript 老大化身忍者，高速运转着。

复读机

随着屏幕外的主人切换到另一个页面，事件大厅的任务队列不再有新任务进入，JavaScript 老大闲了下来。

拿起工作台上那杯已经不太烫的咖啡，JavaScript 老大喝了一大口，看着屏幕前那人浏览的页面，不禁感叹：“看，人类的本质就是复读机！每天打开相同的网页，做着相似的事情，被困在两点一线的生活里，真是无趣！”

“哎！但是谁又不是复读机呢？” JavaScript 老大 长叹一口气，走向 事件大厅。

“来下一个！” JavaScript 老大 对 事件大厅 的管事小弟说道。

“没有啦，老大！”

“那我就在你这等吧，我眯一会，有事件来了就喊我！”

“得嘞！”