前端开发：JS的事件循环执行机制详解

最新推荐文章于 2024-08-21 09:02:55 发布

三掌柜666

最新推荐文章于 2024-08-21 09:02:55 发布

阅读量1.1w

点赞数

分类专栏： web前端知识汇总文章标签： javascript 前端 html

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/CC1991_/article/details/130452506

版权

web前端知识汇总专栏收录该内容

38 篇文章 1 订阅 ¥99.90 ¥299.90

订阅专栏

本文详细探讨了JavaScript的事件循环执行机制，包括JS的单线程特性、同步与异步任务、事件循环的工作原理、微任务和宏任务的区别。通过实例解析了宏任务和微任务的执行顺序，强调了其在前端开发和面试中的重要性。

摘要由CSDN通过智能技术生成

前言

在前端开发中，涉及到JS原生的使用原理是非常重要的知识点，尤其是在实际工作过程中会遇到各种复杂的业务需求场景，以及具体开发中可能会遇到一些涉及基于JS原理的使用，这都要求开发者能够很好的了解和掌握JS原生的常用原理。JS执行是单线程的，它是基于事件循环的，那么本篇博文就来分享一下关于JS的事件循环执行机制，该内容不仅在日常前端开发中是比较重要核心的知识点，而且在前端求职面试时候面试官必考的知识点，尤其是关于异步执行代码时候的事件循环，总结记录一下，方便后期查阅使用。

JS语言的特点

在分享本篇博文之前，首先再来回顾一下JS的语言特点。众所周知，JS是单线程的，所有同步任务都在主线程上执行，即执行栈 execution context stack，主线程之外还存在一个任务队列(也有人称之为消息队列)。也就是只能在同一个时间内做一件事情，意味着所有任务都需要排队执行，前面一个任务结束之后才会执行后面一个任务，JS代码是从上到下一行一行执行的，如果某一行报错，则停止执行下面的代码；先执行同步代码，再执行异步代码。这样做会导致最大的问题就是如果执行的时间比较长，就会引起页面渲染不连贯，导致页面渲染加载阻塞。