你是什么垃圾?

分享

警告

“警告!警告!警告!” JavaScript 执行大厅传出了刺耳的警告声。

“报告:内存即将溢出,请及时清理无效的内存占用,释放资源!” 伴随着阵阵的警告铃声,大厅正中的大屏幕上显示出了警告信息。

“什么情况?这页面才打开了一会会,内存的消耗就这么大?这都已经去了好几次了!” JavaScript 主线程,也就是 JavaScript 执行大厅的老大疑惑的说道:“看来又得去变量大厅瞧瞧了!”

说着,JavaScript 主线程放下了手头的工作,赶忙往 变量大厅 走去。

变量大厅

“挤死了,你过去点!” 还未到 变量大厅JavaScript 老大远远就听到了这骂骂咧咧的声音。

“不行啊,那边已经挤满了变量!”

“挤一挤啊,我这半只脚还在外面呢!”

“什么!你在说一遍!太吵了听不清!”

JavaScript 老大发现事情即将恶化,要是在不及时清理的话,这些变量就要反了,下意识的 JavaScript 主线程跑了起来。

不一会,JavaScript 主线程终于跑到了变量大厅,跑到了大厅前的看台,环顾看了一下。

整个大厅被分为了 3 个区域,两块 16MB 的区域(新生区),其中标着 FROM 的区域挤满了变量,标着 TO 的区域空空如也,还有一块占地极大的区域(1.4G 老生区),也快被挤满了。

“行了,都别吵了!” JavaScript 老大大声喊道:“我来回收内存了!”

“赶紧赶紧,我后面还有变量要进来。” 刚刚那半只脚还在大厅外的变量说道。

点名

全局对象,你给我出来!” JavaScript 老大喊道。

“在这,在这!” 老生区 中传出了急切的声音:“您可算来了,我都快被挤死了,这次可要把我在的 老生区 也给清理清理!”

“就你最胖,你占的空间最多!” 老生区 中的其他变量嘟囔着。

“谁让我是老大!没我,你们都不可能在这活着!”

“行了!行了!赶紧上来看看吧,这里已经快被挤爆了,你们 老生区 的内存也快挤满了!”

“行!交给我吧!” 说着,全局对象 从兜里掏出了一包指针,说道:“接下来我开始点名,叫到的就继续报你存的变量引用!现在开始!”

“对象 OA!” 全局对象喊道。

“在这!” 兴奋的喊道从 老生区 中传出:“那我也开始了!你先等我报完哈。”

“那么你开始吧!” 全局对象说道。

“变量 VA!”

“到!我是基础类型,没有对别的变量的引用!OA 你继续吧!”

“嗯!函数 FA!” 全局对象继续喊道。

“到!那么现在我开始报我所保存的变量的引用!对象 OA 你等等!”

“嗯!你开始吧!”

“...”

过了一会,全局对象 终于开始了第二个报名。

“...”

又过了好一会,全局对象 终于也报完了名。

“行,现在大家都知道自己有没有被点到名了,接下来交给我吧,你回去吧。” JavaScript 老大对 全局对象 说道。

你是什么垃圾?

说着 JavaScript 老大走到了 新生区,这里挤着满满的新生变量,看着一个个陌生的面孔,JavaScript 老大走到第一个变量面前。

“说吧!你是什么垃圾?”

“垃圾?我不是垃圾啊!”

“你被点到名了?”

“没有。”

“那你就是垃圾!待这吧。” 说着 JavaScript 老大走到了下一个变量面前。

“你呢?是什么垃圾?”

“我应该是可回收的!” 说着这个变量做了个鬼脸。

“看来你知道了自己的命运啊,待这吧!” JavaScript 老大继续往后走。

“你呢?”

“我不是垃圾哦,我可被点到名了!”

“看把你得意的!去 TO 那边吧!” JavaScript 老大指了指另一块 新生区 TO

“好嘞 ~” 说着,变量蹦蹦跳跳的跑了过去。

JavaScript 老大继续往后走着...

“终于结束了,好了,现在还在这 FROM 中的变量自己乖点,给我消失!”

咻的一下,FROM 所指向的新生代区,瞬间清空,整个变量大厅瞬间空旷了不少。

看着空空的 FROMJavaScript 老大拿起放在空区前面的 FROM 标志,与 TO 标志换了换,满意的点了点头。

老生代

“老大老大,老生代这边也清清呗!” 全局变量喊道。

“这就来!”

转眼间,JavaScript 老大来到了 老生区 的第一个位置,看了一眼 全局变量

“你懂的!我不是垃圾,我要是垃圾的话,那在坐的可都是垃圾了!” 全局变量 不慌不忙的说道。

“就你厉害,你还不是我生成的!”

“但谁让我是你第一个生成呢!” 全局变量 得意的说道。

“看把你骄傲的!行,我去看下一个了。” 说着 JavaScript 老大走向了下一个变量。

“你呢?” JavaScript 老大问道。

“我是 Object 对象,直接隶属于 全局对象。”

“哟,一个个的,骄傲的啊。”

... 终于全局对象的嫡系都确认完。

“你是什么垃圾?” JavaScript 老大知道酱油时间已经过去,提了提神。

“我可被点到了两次名!” 说完该变量骄傲的抬起了头。

“看把你牛皮的。”

“你呢?” JavaScript 老大对下一个变量问道。

“我是垃圾。” 变量委屈的低下了头。

“自己消失还是我帮你一把?”

“我自己消失,不需要您动手。” 说话间,该变量所在的位置瞬间空了出来。

“哟!占用不少空间啊!”

...

JavaScript 老大继续往下走着,一个个变量所在的空间空了出来。

“你们这 老生区 空间还够,我就不进行碎片整理了哈,等下次来我在来整理整理,我那边还忙着呢。” JavaScript 老大说着走出了 变量大厅

“好勒!您慢走 ~” 全局变量 说道。

再次来访

过了一会,处在执行大厅的 JavaScript 老大放下手中的工作,瞧了大厅内的监视面板,内存使用量再次达到了阈值,趁还没发出警告,再次动身走向了 变量大厅

“哟!老大,您又来啦 ~” 全局对象 看到 JavaScript 老大走到看台,赶忙迎了上去。

“行,你来了,报名吧 ~”

“得嘞 ~”

报名声此起彼伏,这次比上一次经历的时间明显短了不少。

“行,你回去吧,接下来交给我。” 说着 JavaScript 老大向 FROM 走去。

“看你上次也在这啊,这次被点到名了吗?” JavaScript 老大对第一个变量问道。

“那必须的,这次也点到了!”

OK 那你去 老生区 找个合适的位置待着吧。”

“好的!” 刚晋升到 老生区 的变量一脸得意的向那个宽敞的 老生区 走去。

“上次没见过你,说吧,你是什么垃圾?”

“我....”

“行了,我知道了,你就待这吧!”

... 相似的过程再一次上演,不过在后续问话的过程中,JavaScript 老大发现了一个问题:TO 的空间已经使用 25% 了。

“不能再往 TO 里面塞变量啦,不然等下新建的变量就没地方待了!” JavaScript 老大心想道。

“你是垃圾吗?” JavaScript 老大对下一个变量说道。

“我不是垃圾,我被点到名了!”

“emmm... 那你去老生代的空间去吧!” JavaScript 老大想了想说道。

“真的?” 被问话的变量眼神亮了起来。

“行了,去吧,服从安排!”

... 之后,所有被点到名的新变量都被 JavaScript 老大安排在了 老生区

碎片整理

在过完了 新生区 的变量后,JavaScript 老大走向了 老生区,相似的过程再一次上演。

“老大老大,整理一下空间!” 全局变量 还记着之前 JavaScript 老大说的话。

“那这次就给你们整理整理吧!由于之前的变量被清了不少后,你们都不坐一起了,赶紧的看前面有空位置就往前坐!”

“得嘞!” 老生区 的变量们开始了熙熙攘攘的移动,不一会,就坐的整整齐齐。

“好了,整理也整理了,那我走了哈 ~”

“得嘞,您慢走 ~~”

消逝

伴随着,屏幕上那个小三角箭头点向该页面的叉叉,JavaScript 主线程放下了手中的工作,熙熙攘攘的变量大厅也瞬间安静了下来,大家面部凝重,不一会就消逝了。

一阵风吹过,吹起了点点尘埃。

阅读更多

JavaScript 对象 & 原型

前言 这次的 why what or how 主题:JavaScript 对象 & 原型。 此类文章在百度上一搜一大把,其实不用再写了,但是本着把这个问题解释的清清楚楚明明白白,还是开始写了。 原因如下: 1. 面试宝典类文章,弄张图片一糊弄,让人觉得自己理解了。 2. 解释类文章,告诉你一堆语法,对语法一顿解释,告诉你就是这样的,还是没说清楚。 3. 很少有文章单独解释这个点!但这个点是基础!真的很重要! 所以本篇文章想说一说对象 & 原型,但为了确保能顺利理解,请先看完 JS 变量存储?栈 & 堆?NONONO!,因为该篇文章从变量存储的角度来解释 JavaScript 对象 & 原型,请确保看完,在看这篇文章。 什么是对象? 既然要说清楚,

By Breeze

浏览器下的 Event Loop

前言 javascript 是以单线程的形式运行在宿主环境下,javascript 采用了回调的形式来解决异步任务。 为什么是单线程? javascript 的最开始的出现是为了给 web 页面增添一些动态的效果,那么就避免不了获取页面上的元素信息,如果 javascript 是以多线程的形式运行在浏览器内,如果两个线程内的 javascript 同时去获取/修改,某个页面上的元素,那么浏览器该让哪个 javascript 线程拥有获取/修改该元素的权限呢?由于元素的信息会经常性的发生变化,那么又改如何去同步各个线程内所保存的元素信息呢? 所以综合以上问题, javascript 是单线程的原因就显示意见了,单线程在执行时,对于元素信息的引用在同一时间仅可能只有一个,那么以上所有的问题都不存在了。 什么是异步任务? 任何代码在执行时,都会碰到一些需要经过大量时间运算或是等待的代码,在浏览器的环境下,常见的就是 http 任务,比如:资源的加载(图片的 onload 事件),ajax 的请求(XMLHttpRequest 的 onLoad 事件)还有页面元素的点击事件以及

By Breeze

node 下的 Event Loop

前言 通过 浏览器下的 Event Loop ,可以得知 javascript 是一门事件驱动的语言, javascript 主线程通过不断的调用事件队列中的事件来完成异步任务。那么 Node 下是否也是如此? Node 下的事件队列 在 Node 官网有这样一篇文章:The Node.js Event Loop, Timers, and process.nextTick() 。 该文章主要讲述了 Node 中是如何处理以及实现 Node 下的 Event Loop。 主要包含以下内容: 事件队列 不同于浏览器,Node 下的有 6 个事件处理阶段,其执行顺序和队列名称如下: ┌───────────────────────────┐ ┌─>│ timers │ │ └─────────────┬─────────────┘ │ ┌─────────────┴─────────────┐ │ │ pending callbacks │ │ └─────────────┬─────────────┘ │

By Breeze

什么是 HTML 5?

前言 作为程序员,技术的落实与巩固是必要的,因此想到写个系列,名为 why what or how 每篇文章试图解释清楚一个问题。 这次的 why what or how 主题:现在几乎所有人都知道了 HTML5 ,那么 H5 到底相比于 HTML4 有什么区别呢? 升级版?标准版! HTML5 做为 HTML 标准的第 5 版,于 2014 年发布,相信关注过 HTML5 的发展史的朋友都知道该版本是 WHATWG 和 W3C 握手言和后诞生的,是 W3C 组织与浏览器厂商相互妥协的结果,其中的绝大部分规范都由 WHATWG 组织所制定,之后由 W3C 采纳并入标准中。

By Breeze