浏览器中的event loop, 简单了解。

简单了解 Event Loop 相关知识，知道 JS 异步运行代码的原理。

Event Loop 执行顺序如下所示：

执行全局Script同步代码，（这属于宏任务）

全局Script代码执行完毕后，调用栈Stack会清空；

执行微任务，如果在执行microtask的过程中，又产生了microtask，加入到队列的末尾，也会在这个周期被调用执行；

microtask queue中的所有任务都执行完,微任务后，如有必要会渲染页面

然后开始下一轮 Event Loop

取出宏队列macrotask queue中任务，放入Stack中执行；

执行完毕后，调用栈Stack为空；

执行所有微任务

......

宏任务包括:

script整体代码

setTimeout

setInterval

setImmediate

I/O

UI rendering

microtask类型包括:

微任务包括:

process.nextTick

Promise(这里指浏览器实现的原生promise)

MutaionObserver

觉得这个视频也不错：

https://www.youtube.com/watch?v=cCOL7MC4Pl0

参考文章：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

https://github.com/SunShinewyf/issue-blog/issues/34

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

https://html.spec.whatwg.org/multipage/webappapis.html#event-loops

原文地址：https://www.cnblogs.com/luoxiaoer/p/11751810.html

时间： 2024-08-30 11:07:50

浏览器中的event loop, 简单了解。的相关文章

【F12】chrome浏览器中 F12 功能的简单介绍

chrome浏览器中 F12 功能的简单介绍由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首先介绍Chrome开发者工具中,调试时使用最多的三个功能页面是:元素(ELements).控制台(Console).源代码(Sources),此外还有网络(Network)等. 元素(Elements):用于查看或修改HTML元素的属性.CSS属性.监听事件.断点等. 控制台(Console):控制

理解Nodejs的Event Loop

Node的"event loop"主要是用来处理高输出量的.这很神奇,这也是为什么node可以在单线程的情况下同时处理很多的后台操作.本文就会集中讲述event loop是怎么运行的,这样你可以可以使用这个神奇的东西完成你自己的工作. 事件驱动的编程(event-driven programming) 要理解event loop首先需要了解的就是event driven programming(事件驱动的编程).这个在1960年代就已经被人们所熟知.如今,event-driven pr

数据密集型和 cpu密集型 event loop

Node.js在官网上是这样定义的:“一个搭建在Chrome JavaScript运行时上的平台,用于构建高速.可伸缩的网络程序.Node.js采用的事件驱动.非阻塞I/O模型使它既轻量又高效,是构建运行在分布式设备上的数据密集型实时程序的完美选择.”Web站点早已不仅限于内容的呈现,很多交互性和协作型环境也逐渐被搬到了网站上,而且这种需求还在不断地增长.这就是所谓的数据密集型实时(data-intensive real-time)应用程序,比如在线协作的白板,多人在线游戏等,这种web应用程序

JavaScript的Event Loop（浏览器）

春节的时候看到奇舞周刊发的关于Event Loop的文章https://mp.weixin.qq.com/s/KEl_IxMrJzI8wxbkKti5vg,看的也是迷迷糊糊. 昨天准备写一下几个Promise的小例子,发现理解起来还是要懂得Event Loop,所以又在网上找了几篇文章看了一下,发现各有各的说法,不过关于基础的部分都是一致的, 本着学习记录的心态,我这里简单地把我对Event Loop的理解说明一下,当然还是有很多不到位的地方,欢迎大家一起交流学习. 首先我们来看一张图片:(<L

记一次途家面试中问到的JavaScript事件机制：Event Loop

前几天去途家面试,问到了事件机制,以及异步队列的问题.很遗憾,当时答错了.回来之后查了下资料,看到阮一峰老师博客的分析,感觉讲的非常浅显易懂,就分享过来了. 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,

解决webkit浏览器中js方法中使用window.event提示未定义的问题

这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的形式传入(后文会详说). function myfunc(param){ alert(window.event); } //ie中 <input type="button" onclick="myfunc('testie')" > //一切正常 //webk

基于Server-Sent Event的简单聊天室　Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。

基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室.

Javascript Event Loop

Event Loop 是一个很重要的概念,指的是计算机系统的一种运行机制. JavaScript语言就采用这种机制,来解决单线程运行带来的一些问题. 本文参考C. Aaron Cois的<Understanding The Node.js Event Loop>,解释什么是Event Loop,以及它与JavaScript语言的单线程模型有何关系. 想要理解Event Loop,就要从程序的运行模式讲起.运行以后的程序叫做"进程"(process),一般情况下,一个进程一次

深入理解Javascript单线程谈Event Loop

假如面试回答js的运行机制时,你可能说出这么一段话:"Javascript的事件分同步任务和异步任务,遇到同步任务就放在执行栈中执行,而碰到异步任务就放到任务队列之中,等到执行栈执行完毕之后再去执行任务队列之中的事件."但你能说出背后的原因吗? 1.线程与进程进程:是系统资源分配和调度的单元.一个运行着的程序就对应了一个进程.一个进程包括了运行中的程序和程序所使用到的内存和系统资源. 线程:线程是进程下的执行者,一个进程至少会开启一个线程(主线程),也可以开启多个线程. 2.同步和异