JS 的本质?复读机?忍者!

609 阅读9分钟

前景提要

你是什么垃圾?

烦死了!

“你说你们人类烦不烦!前几天就一直在打开这个网页,今天又打开了!这个网页啊!” 说着 javascript 老大 拍了拍自己的脑袋,叹道:“哎,这个网页的 javascript 执行任务,我实在是不想接了!这样子下去,我的头发可不保咯!”

“哎!算了!谁让我不是浏览器的老大呢,干活,干活!” javascript 老大拿起一旁的的 javascript 语法解释器,将 html 解析器 送过来的 javascript 文本解释并执行了起来。

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

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

焦急

“叮铃 ~ 叮铃 ~ 叮铃 ~ ” 一旁的电话突然响了起来,js 老大顺手按下了免提。

“怎么这么慢啊!这都过去好几秒了!我这边还等着解析 html 呢!” 电话一头穿来了 html 解析器 焦急的声音。

“别介啊,你也不是不知道,这个网页前几天就打开过,里面 js 代码那个差哟,还有一个固定时间的 while 死循环,你说能快到哪里去!上面还有个注释,说什么加钱优化体验用!真是个黑心网站。” js 老大 拿起一旁的毛巾,擦了擦额头上的汗水,刚从循环出来的他,还阵阵发晕。

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

“怎么可能,这不快了嘛!就好了。”

“行,那你先忙!快点哦 ~” 说完,html 解析器 挂掉了电话。

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

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

短暂的等待

放下电话,js 老大 走到一旁的咖啡机前,按下按钮,出来一杯香浓的卡布奇诺,抿了一口,提了提神。

“这个网页,可折腾死我了!哎 ~” 说着,js 老大 放下手中的咖啡,朝着 事件大厅 走去。

“你这有事件进来吗?” js 老大 向这儿管事的小弟问道。

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

js 老大 走进 事件大厅,整个大厅为 1 : 2 的长方形,共分为两部分,左右两个正方形各占一半,两边方形区域中间都有栏杆分隔,像是旅游景点前的过道,弯弯曲曲,但只有一个队列。左边方形正中上面挂着 宏任务 三个大字,右边则挂着 微任务 三个大字。右边的地板,明显比左边的要破了不少,仿佛经历过不少的踩踏。

“看来 html 解析器 也被折腾的够呛啊!这要是平常页面,事件早就过来了!这儿早就排起了长队了!”

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

“哎 ...” 看事件还没过来,js 老大 和小弟闲谈了起来。

“请问这里是 事件大厅 吗?” 正当 js 老大 和小弟闲聊间,走过来了个事件,头上顶着一个大大的 DOMContentLoaded 标志。

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

“你好,我是 DOMContentLoaded 事件,刚刚被 html 解析器 派过来”

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

“嗯,有空再谈哈 ~”

“好嘞!” 小弟嘴上说着,但心里却想着:“怕是没有时间咯,每次都这样,在说了,还是这个网页...” 小弟仿佛想到了等下事件大厅人满为患的样子,提了提自己的精神状态。

“不过刚来这事件,娇滴滴的,长滴是相当的不错啊!是哪位函数有福了呢 ~” 小弟笑了笑。

另一半!

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

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

变量大厅 啊!寻找你的另一半!” js 老大 老大一脸的兴奋。

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

“那说不准哦,先去 变量大厅 看看吧。!” 说话间,他俩已经来到了 变量大厅

“喂喂喂,大家静静,请 DOMContentLoaded 事件,也就是我旁边这位的另一半出来!” js 老大 走到看台上,对着话筒说道。

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

“那你出来跟我走吧!” js 老大 放下手中的话筒,上来了个帅小伙,一看老大身旁的事件妹子,眼睛转不动,脚也迈不开了。

“瞧瞧你这出息!” js 老大 拍了拍函数的肩膀,说道:“走吧,去我那!”

执行

说话间,三人来到 js 老大执行大厅

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

“我真正的力量?” 函数疑惑的问道,半信半疑的躺在了工作台上。

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

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

见工作台没有声响, js 老大 排了排自己的脑袋:“忘了,忘了,你这会不能说话!哈哈!那你自己感受下吧。”

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

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

“嘿,别发呆啦!” js 老大 在事件对象面前挥了挥手。

“哦,哦,老大你说。”

“等下需要你配合!”

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

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

“把你的 target 属性给我。” js 老大 向着 DOMContentLoaded 说道。

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

“嗯嗯,快去吧!”

...

过了没多久,js 老大 放下手中的工具,长舒一口气,“DOMContentLoaded 感觉咋样!”

“有点儿累!”

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

...

“怎么了,你们?怎么不说话?”

js 老大 与事件对象相视一笑,没说话。

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

微任务

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

又一轮的点名清变量开始,一波清理完成后,js 老大 赶忙跑到了 事件大厅

“刚刚的函数执行有产生微任务吗?” js 老大 边问着管事小弟,边瞧向了变量大厅的右边,发现排了不少队。

“这么多!”

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

“这是?” js 老大 问向管事小弟。

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

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

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

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

“这个任务是谁的,认领一下!”

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

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

如此循环往复,右侧的长队,终于慢慢变短,直到微任务队列被清的一干二净。

反复横跳

“来下个事件!” js 老大 喊道。

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

“哎,你等等,我让你出去了你在出去呀,脾气这么大!” 事件大厅里的管事小弟跑了出来。

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

“没事,跟我走吧!” js 老大load 事件说道。

不一会,js 老大 带着 load 来到了变量大厅,喊道:“load 的另一半,出来!”

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

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

... 依然没变量回应。

“那你,就待这吧,我还赶着去取下个事件!” js 老大load 说道。

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

“应该是真没有...” js 老大 看着这暴脾气的妹子,也不敢大声说了,说完就又立马跑到了 事件大厅

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

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

不一会,js 老大 领着两个函数,走出了事件大厅。

又一会,js 老大 清理了变量大厅。

再一会,js 老大 一个个的执行了微任务,事件大厅右侧的任务队列再次清空。

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

...

整个 js 大厅,只见一个忙碌的身影在 事件大厅,执行大厅,变量大厅之间反复横跳,仿佛一个无限循环的莫比乌斯环,永远没有尽头,而 js 老大 化身一个忍者,高速的运转着。

复读机

伴随着屏幕外的主人看起了下一个页面,事件大厅 的宏任务队列没有了新的事件对象进入,js 老大 闲了下来。

拿起工作台上那杯已经不是很烫的咖啡,js 老大 喝下了一大口,看了看屏幕前那人浏览的页面,不禁感叹道:“看!人类的本质就是复读机!每天都开这几个网页,干着同样的事情,每天都被拘束在 3 点一线的生活里,真是无趣!”

“哎!但是谁又不是复读机呢?” js 老大 长叹一口气,走向 事件大厅

“来下一个!” js 老大事件大厅 的管事小弟说道。

“没有啦,老大!”

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

“得嘞!”

相关阅读