记录一下中移物联网的一面（方向：前端开发）

最新推荐文章于 2024-07-25 09:21:08 发布

wennianzhu

最新推荐文章于 2024-07-25 09:21:08 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.youkuaiyun.com/wennianzhu/article/details/107138890

版权

本文深入探讨JavaScript的异步机制与事件循环原理，解析如何利用浏览器线程实现异步操作，以及事件循环如何管理任务队列，确保主线程的高效运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

技术

js里的异步操作是如何进行的（叙述原理）

害我举了一个ajax的例子，面试官好像没有特别满意，引导我往线程的方向去思考。
虽然JavaScript是单线程的，可是浏览器内部不是单线程的。我们假设JavaScript只执行自己程序的代码，当遇到异步操作时把他丢给浏览器，由浏览器的线程去执行，自己继续往下执行。让浏览器执行完异步之后，再把异步执行完的东西给JavaScript，让JavaScript去执行。

WebAPIs：浏览器为异步任务单独开辟的线程（服务JavaScript的，处理JavaScript的异步）
虚线那一块（看图）：堆（heap）和栈（stack）共同组成了js主线程（这个就是我们JavaScript的线程）
callback queue（最下面的那个长方形）：任务队列，里面放着各种事件，比如我们点击所触发的事件，浏览器会帮我们以任务的形式，把他放入任务队列中
event loop（那个转圈圈）：任务循环，又叫事件循环。
流程：
当我们的程序运行时，执行我们JavaScript的主线程，堆（heap）和栈（stack）共同组成了JavaScript的主线程，函数的执行就是通过进栈和出栈实现的。比如图中有一个foo()函数，主线程把它推入栈中，在执行函数体时，发现还需要执行上面的那几个函数，所以又把这几个函数推入栈中，等到函数执行完，就让函数出栈。当栈中的函数需要异步的时候，主线程会把需要异步的部分推给WebAPIs（浏览器开辟的线程），由WebAPIs去执行。
当所有函数都执行完毕后，所有的函数就都被推出了栈。这个时候，程序就会通过event loop（事件循环）去callback queue（任务队列）中寻找下一个任务推入栈中。而WebAPIs（浏览器开辟的线程）执行完主程序推给他的异步之后，将处理后的结果以事件的形式丢到callback queue（任务队列）中，这个事件就是我们写代码的时候的回调函数。而这个时候任务队列里的任务正在往栈（stack）中推，所以异步之后的事件也会被推到栈（stack）中执行，但这个时候他已经不在是异步的了而是同步的，JavaScript的主线程是可以执行的。由此无论是同步还是异步，所有的函数全部执行完毕。（event loop（事件循环）总是会循环的查找任务队列里是否还有任务，有就往栈（stack）中推）

再上一个图方便理解

在这里插入图片描述

小结： javascript的单线程和异步机制，总的来说JavaScript一直是单线程的，并不会去实现异步，浏览器才是实现异步的那个家伙，只是浏览器会通过事件驱动把异步之后的操作通过回调函数的形式丢到任务队列，在由JavaScript的主线程去执行回调函数。由此整个主程序都是同步，但由于浏览器线程的帮助，实现了异步的功能。