看了一篇国外的文章之后,决定整理一下,原文在此(需要科学上网):
"How JavaScript works: an overview of the engine, the runtime, and the call stack"
一、首先聊聊JS引擎
JS引擎,就是浏览器中解析和执行javaScript代码的部分.这个部分很核心很重要,但是也很简单.主要就包括两个部分: 一个是内存堆,还有一个是调用栈

- 内存堆: 进行内存分配的地方
- 调用栈: 用来存储你的调用栈帧的地方,也就是保存你的函数运行环境的地方
二、运行时
运行时
简单来说就是运行javaScript代码的环境,例如在浏览器中,JS code的运行环境就是浏览器.那么运行时也就是浏览器了.想必大多数人都用过web APIs,例如ajax和dom操作,但是这些APIs都不是来自于JS引擎哦,都来自于运行时呢。
另外很常见到的Event Loop和JS中的回调队列,都来自于运行时,放一张图片先:

三、详细说一下调用栈
JS是一门单线程语言,这也就意味着在JS引擎中只存在一个调用栈。同时也就意味着在某一时刻,JS引擎只能干一件事情。如果我们调用了一个函数,那么这个函数的运行环境就会作为一个调用栈帧(stack frame)被压入调用栈的顶部(push)。如果这个函数调用结束,那么对应的栈帧就会被弹出调用栈(pop)。
因为JS中只有一个调用栈,可想而知,这个调用栈的大小肯定有限。那么当出现调用了过多的函数并且没有函数返回的情况下,就会出现栈溢出(“Blowing the stack”)。

这个肯定不好啦,所以尽量避免写出有无限递归的代码。
四、并发(Concurrency)和事件循环(Event Loop)
既然JS是单线程的,那么如果一个任务运行时长贼久怎么办?好的,没有疑问,你的网页可能挂掉了。那么怎么办呢?事件循环可以帮到你。
想要解决长耗时任务带来的UI渲染阻塞等的问题,那么需要用到的就是异步机制。就是使用setTimeout或者setInterval或者promise异步的进行代码的运行,防止阻塞主线程.
大致整理如上.
网友评论