【Web技术】1055- 如何理解单线程的JavaScript及其工作原理

淡淡的烟草味﹌ 2022-09-06 14:29 76阅读 0赞

![832f9ea98a2239bc94c5f11827d2cb4d.png][]

> 随着JavaScript的日益流行，团队也利用其在前端，后端，混合APPS，嵌入式设备以及更多设备等开发栈中诸多层面的支持，JavaScript能创造出令人惊叹的软件，开发就必须更加深入了解JavaScript语言的内部工作机制！

> 此篇文章会详细地研究并解释JavaScript的工作原理，通过了解这些细节，通过合理地使用提供的APIs，你将能够写出更好的，非阻塞的程序。

## 一、单线程的来源 ##

几乎所有人都已经听过V8引擎的概念，并且很多人知道JavaScript是单线程的，JavaScript作为浏览器脚本语言，它的主要用途是与用户交互，那么为什么JavaScript是单线程呢？如果JavaScript是多线程，当页面更新内容的时候、用户又触发了交互，这时候线程间的同步问题会变得很复杂，为了避免复杂性，故JavaScript被设计成单线程。

## 二、JavaScript引擎 ##

谷歌V8引擎是一个流行的JavaScript引擎。这里有一个简单的视图来描绘其大概模样。

![1463f0cf004b94218890dbaa50f8a6d9.png][] image.png

引擎包括两个组件：

*  内存堆——进行内存分配的区域
 *  调用栈——代码执行时栈中的位置

## 三、运行时 ##

几乎每个JavaScript开发者都使用过一些浏览器 API（比如setTimeout）。然而这些API并不是引擎所提供的。这些Web API是浏览器提供的，还有DOM事件，AJAX及其它。它们怎么执行呢，实际情况有点复杂。

![2250041a4eed66bbb26c816855b35633.png][] 于是乎，就有了如此流行的事件循环（也称event loop或事件轮询）和回调队列。

## 四、调用栈 ##

前面我们说过，JavaScript是单线程的编程语言，这意味着只有一个调用栈。这样它只能一次做一件事情。调用栈是一种数据结构。当执行进入一个函数，把它置于栈的底部。如果从函数中返回则从栈底部移除函数。这就是调用栈所做的事情。  
举个????子，看如下代码:

fucntion multiply(x,y) {
        return x * y;
    }
    function printSquare(x) {
        var s = mulitiply(x,x);
        console.log(s);
    }
    printSquare(s);

当引擎开始执行这段代码的时候，调用栈会被清空，之后产生如下步骤：

![79d18781b3d0f3700e5dfff7c6e36ec5.png][] image.png

## 五、堆栈溢出 ##

一旦达到最大调用栈大小的时候发生。这种情况相当容易发生。特别是当你使用递归时，看下面的代码：

function foo () {
        foo();
    }
    foo();

当引擎开始执行这段代码的时候，它开始调用foo函数。这个函数，然而会递归并开始调用其自身而没有任何结束条件。所以在每步执行过程中，调用堆栈会反复添加foo函数。就会出现如下情况：

![403e592f8274ccc5731372be9f853299.png][] 当调用栈中的函数调用次数超过了调用栈的实际大小，浏览器决定抛出一个错误，如下图所示：![61e1ea976b3f36fdf14c1e95f3b7c5ef.png][]  
小伙伴们可以自己在浏览器的控制台里试试！

## 六、事件循环（Event Loop） ##

又该拿出那张经典的图了~

![2efbe9ad9b3b010ccb98d255b8525a69.png][] image.png

> Event Loop 负责执行代码、收集和处理事件以及执行队列中的子任务。

具体包括：

*  Javascript 有一个主线程和执行栈，所有的任务都会被放到调用栈等待主线程执行
 *  同步任务会被放在调用栈中，按照顺序等待主线程依次执行
 *  主线程之外存在一个任务队列，所有任务在主线程中以执行栈的方式运行
 *  同步任务都在主线程上执行，栈中代码在执行的时候会调用 Web API，此时会产生一些异步任务
 *  异步任务会在有了结果（比如被监听的事件发生时）后，将注册的回调函数放入任务队列中
 *  执行栈中任务执行完毕后，此时主线程处于空闲状态，会从任务队列中获取任务进行处理

以上过程会不断重复，这就是浏览器的运行机制，也是Event Loop。

## 最后 ##

> Event Loop 我们还得继续，理解它是突破前端第一层天花板的毕竟之路！

关于本文

# 来源：\_啊呜 #

https://juejin.cn/post/6991241111167565860

![169c442643bb4c9c387a379b8ea58dba.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![8d1f848d6d37b78e6f9b604399728a0e.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 130+ 篇原创文章

[832f9ea98a2239bc94c5f11827d2cb4d.png]: /images/20220829/a5dbcc2651464d3992f22d799124142a.png
[1463f0cf004b94218890dbaa50f8a6d9.png]: /images/20220829/1ae403fdff104c598de71bfaf1c3b4c0.png
[2250041a4eed66bbb26c816855b35633.png]: /images/20220829/0fb8a24f19294b54a7b300a0bd49004a.png
[79d18781b3d0f3700e5dfff7c6e36ec5.png]: /images/20220829/345874cc592348de9409a28a528802e6.png
[403e592f8274ccc5731372be9f853299.png]: https://img-blog.csdnimg.cn/img_convert/403e592f8274ccc5731372be9f853299.png
[61e1ea976b3f36fdf14c1e95f3b7c5ef.png]: /images/20220829/933b758be72f4aa6a05b280294f95643.png
[2efbe9ad9b3b010ccb98d255b8525a69.png]: /images/20220829/a3e71e29f2224fe0bfb57ce8e79e4cd0.png
[169c442643bb4c9c387a379b8ea58dba.gif]: /images/20220829/b1d55ef16d444a0f8b5b2f007f2b4d9d.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[8d1f848d6d37b78e6f9b604399728a0e.gif]: /images/20220829/9a9fd9c0ee9e43ceaa6d9208a11bf52a.png