浏览器的事件循环详解

浏览器的事件循环详解

前言

浏览器事件循环,基础面试中大部分都会问的,本文讲讲这个知识点。

事件循环机制

事件循环是负责执行代码、收集和处理事件以及执行队列中的子任务的一套机制。

在事件循环机制中,使用的栈数据结构便是执行上下文栈,每当有函数被调用时,便会创建相对应的执行上下文并将其入栈;使用到堆数据结构主要是为了表示一个大部分非结构化的内存区域存放对象;使用到的队列数据结构便是任务队列,主要用于存放异步任务。如下图:

浏览器的事件循环详解

执行上下文栈

在JavaScript代码运行过程中,会进入到不同的执行环境中,一开始执行时最先进入到全局环境,此时全局上下文首先被创建并入栈,之后当调用函数时则进入相应的函数环境,此时相应函数上下文被创建并入栈,当处于栈顶的执行上下文代码执行完毕后,则会将其出栈。这里说的栈就是执行上下文。

任务队列

在事件循环机制中,存在多种任务队列,其分为宏任务队列和微任务队列两种。

宏观任务

宏任务包括setTimeout、setInterval、I/O、UI rendering。

微任务

微任务包括Promise、Object.observe(已废弃)、MutationObserver(html5新特性)。

事件循环机制的流程

主线程执行JavaScript整体代码,形成执行上下文栈,当遇到各种任务源时将其所指定的异步任务挂起,接受到响应结果后将异步任务放入对应的任务队列中,直到执行上下文栈只剩全局上下文;

将微任务队列中的所有任务队列按优先级、单个任务队列的异步任务按先进先出的方式入栈并执行,直到清空所有的微任务队列;

将宏任务队列中优先级最高的任务队列中的异步任务按先进先出的方式入栈并执行;

重复第 2 3 步骤,直到清空所有的宏任务队列和微任务队列,全局上下文出栈。

简单来说,事件循环机制的流程就是,主线程执行JavaScript整体代码后将遇到的各个任务源所指定的任务分发到各个任务队列中,然后微任务队列和宏任务队列交替入栈执行直到清空所有的任务队列,全局上下文出栈。

最后

虽然Node.js也有事件循环,可是它和浏览器的事件循环完全不是一个东西。Node.js采用V8作为js的解析引擎,而I/O处理方面使用了自己设计的libuv,libuv是一个基于事件驱动的跨平台抽象层,封装了不同操作系统一些底层特性,对外提供统一的API,事件循环机制也是它里面的实现。这里不展开讲了,想了解的自己去看文档。

谢谢阅读!

推荐教程:《JS教程》

以上就是浏览器的事件循环详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2635484.html

(0)
上一篇 2025年3月7日 04:50:00
下一篇 2025年3月7日 04:50:10

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 彻底弄懂JavaScript执行机制

    本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我。 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序…

    2025年3月7日 编程技术
    200
  • javascript是什么技术

    javascript是一种属于网络的高级脚本语言,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 javascript介绍 (推荐学习:javasc…

    2025年3月7日
    200
  • 深入研究Node.js中的日志信息

    当你开始用 javascript 进行开发时,可能学到的第一件事就是如何用 console.log 将内容记录到控制台。如果你去搜索如何调试 javascript,会发现数百篇博文和 stackoverflow 文章都会简单的告诉你用 co…

    2025年3月7日 编程技术
    200
  • 10个使用Console进行javascript调试的高级技巧

    在过去的十年中,我最热衷的事情之一就是前端开发(特别是JavaScript)。作为一个“匠人”,我喜欢专研各种工具。在本文,我会为你介绍一些用老式console来debug的技巧。 是的,我们都知道下面基本的技巧: console.log(…

    2025年3月7日 编程技术
    200
  • JavaScript中必须掌握的10个基础问题

    javascript 是一种客户端编程语言。 全球超过90%的网站都在使用它,它是世界上最常用的编程语言之一。 因此,今天javascript栏目来讨论 10 个有关 javascript 的常见问题。 1.如何从数组中移除一个特定的项 思…

    2025年3月7日
    200
  • 了解JS中的回调

    你有无意中看到 “callback” 但并不知道其中的意思么?不用担心。不是只有你一个人这样。很多JavaScript 新手都难以理解回调。 虽然回调比较令人困惑,你仍然需要彻底的学习理解它们,因为它在 JavaSc…

    2025年3月7日 编程技术
    200
  • 详解JavaScript中的回调函数并使用它

    在JavaScript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回。 因为函数是第一类对象,我们可以在JavaS…

    2025年3月7日
    200
  • 开发react用什么工具?

    react可以用的开发工具有:1、Chrome React Dev Tools;2、React Sight;3、React Bootstrap;4、Create React App;5、React Styleguideist等等。 适用于所…

    2025年3月7日 编程技术
    200
  • 详细了解javascript中的modules、import和export

    在互联网的洪荒时代,网站主要用 HTML和 CSS 开发的。如果将 JavaScript 加载到页面中,通常是以小片段的形式提供效果和交互,一般会把所有的 JavaScript 代码全都写在一个文件中,并加载到一个 script 标签中。尽…

    2025年3月7日
    200
  • JavaScript今年25 岁了!

    javascript视频教程栏目介绍javascript的发展历程 相关免费学习推荐:javascript视频教程 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。 本文已过…

    2025年3月7日
    200

发表回复

登录后才能评论