JavaScript事件循环机制
事件循环
事件循环不仅仅包含事件队列,而是具有至少两个队列,除了事件,还要保持浏览器执行的其他操作。这些操作被称为任务,并且分为两类:宏任务(或通常称为任务)和微任务。
单次循环迭代中,最多处理一个宏任务(其余的在队列中等待),而队列中的所有微任务都会被处理。当微任务队列处理完成并清空时,事件循环会检查是否需要更新UI渲染,如果是,则会重新渲染UI视图。至此,当前事件循环结束。
事件循环基于两个基本原则:
一次处理一个任务。
一个任务开始后直到运行完成,不会被其他任务中断。
两类任务队列都是独立于事件循环的,这意味着检测和添加任务的行为,是独立于事件循环完成的。
因为JavaScript基于单线程执行模型,所以这两类任务都是逐个执行的。当一个任务开始执行后,在完成前,中间不会被任何其他任务中断。除非浏览器决定中止执行该任务,例如,某个任务执行时间过长或内存占用过大。
所有微任务会在下一次渲染之前执行完成,因为它们的目标是在渲染前更新应用程序状态。
浏览器通常会尝试每秒渲染60次页面,以达到每秒60帧(60 fps)的速度。在页面渲染时,任何任务都无法再进行修改。如果想要实现平滑流畅的应用,,单个任务和该任务附属的所有微任务,都应在16ms内完成。
宏任务
宏任务的例子很多,包括创建主文档对象、解析HTML、执行主线(或全局)JavaScript代码,更改当前URL以及各种事件,如页面加载、输入、网络事件和定时器事件。从浏览器的角度来看,宏任务代表一个个离散的、独立工作单元。运行完任务后,浏览器可以继续其他调度,
如重新渲染页面的UI或执行垃圾回收。
常见的宏任务有:setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering.
宏任务场景实例
主线程JavaScript代码执行时间需要15ms。
第一个单击事件处理器需要运行8ms。
第二个单击事件处理器需要运行5ms。
假设用户在代码执行后5ms时单击第一个按钮,随后在12ms时单击第二个按钮。
执行情况:
1、[0ms]执行主线程
2、[5ms]第一个单击事件加入队列,不影响主线程
3、[12ms]第二个单击事件加入队列,不影响主线程
4、[15ms]主线程结束,从队列中移除。执行第一个单击事件
5、[23ms]第一个单击事件结束,从队列中移除。执行第二个单击事件
6、[28ms]第二个单击事件结束,从队列中移除。队列为空
微任务
而微任务是更小的任务。微任务更新应用程序的状态,但必须在浏览器任务继续执行其他任务之前执行,浏览器任务包括重新渲染页面的UI。微任务的案例包括promise回调函数、DOM发生变化等。微任务需要尽可能快地、通过异步方式执行,同时不能产生全新的微任务。微任务使得我们能够在重新渲染UI之前执行指定的行为,避免不必要的UI重绘,UI重绘会使应用程序的状态不连续。
常见的微任务有:process.nextTick, Promises, Object.observe, MutationObserver
微任务场景实例
主线程JavaScript代码执行时间需要15ms。
第一个单击事件处理器需要运行8ms。
包含立即兑现的promise,并需要运行4ms的传入回调函数。
第二个单击事件处理器需要运行5ms。
假设用户在代码执行后5ms时单击第一个按钮,随后在12ms时单击第二个按钮。
执行情况:
1、[0ms]执行主线程
2、[5ms]第一个单击事件加入队列,不影响主线程
3、[12ms]第二个单击事件加入队列,不影响主线程
4、[15ms]主线程结束创建但不执行第一个单击事件。立即兑现promise,进入微任务队列。
5、[23ms]从微任务队列挑选任务并执行,检查微任务队列,微任务都执行完毕后。执行第一个单击事件,从队列中移除。
6、[27ms]微任务队列为空,事件循环重新处理宏任务,执行第二个单击事件。
7、[32ms]第二个单击事件结束,从队列中移除。队列为空.
微任务队列中含有微任务,不论队列中等待的其他任务,微任务都将获得优先执行权。
参考资料:
《JavaScript忍者秘籍第二版》
https://html.spec.whatwg.org/multipage/webappapis.html#task-queue
JavaScript事件循环机制的更多相关文章
- 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)
JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...
- javascript事件循环机制 浅尝手记
引入 众所周知Javascript是一个单线程的机制,虽然可以依托多线程的浏览器实现页面如何实现页面复杂的渲染.事件响应,但仍不会改变其单线程的本质:所以对于js的事件循环机制的了解是一个前端人员的必 ...
- 深入理解JavaScript事件循环机制
前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To ...
- 深入浅出Javascript事件循环机制
一.JS单线程.异步.同步概念 众所周知,JS是单线程(如果一个线程删DOM,一个线程增DOM,浏览器傻逼了-所以只能单着了),虽然有webworker酱紫的多线程出现,但也是在主线程的控制下.web ...
- 浏览器中的JavaScript事件循环机制
浏览器的事件循环机制是HTML中定义的规范. JavaScript有一个主线程和调用栈,所有的任务都会被放到调用栈等待主线程执行. JS调用栈 是一种先进后出的数据结构.当函数被调用时,会被添加到栈中 ...
- javaScript 事件循环机制
JavaScript是单线程的编程语言,只能同一时间内做一件事.但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行,这就是因为JS有事件循环机制. 事件循环流程总结 主线程开始执行一段代码, ...
- JS JavaScript事件循环机制
区分进程和线程 进程是cpu资源分配的最小单位(系统会给它分配内存) 不同的进程之间是可以同学的,如管道.FIFO(命名管道).消息队列 一个进程里有单个或多个线程 浏览器是多进程的,因为系统给它的进 ...
- 一道面试题引发对javascript事件循环机制(Event Loop)的 思考(这里讨论针对浏览器)
- JS浏览器事件循环机制
文章来自我的 github 博客,包括技术输出和学习笔记,欢迎star. 先来明白些概念性内容. 进程.线程 进程是系统分配的独立资源,是 CPU 资源分配的基本单位,进程是由一个或者多个线程组成的. ...
随机推荐
- easyUI的常见属性
datagrid (数据表格) $("#tg").datagrid({url:"TaskList",//请求的地址fit: false, //当true时设置他 ...
- Divide Candies CodeForces - 1056B (数学)
Arkady and his friends love playing checkers on an n×nn×n field. The rows and the columns of the fie ...
- Linux C启动时创建pid文件
程序在启动时将pid写入文件,当程序再次启动时会进行检测,避免启动多个实例. util-pidfile.h文件 #ifndef __UTIL_PID_H__ #define __UTIL_PID_H_ ...
- Django(六)Session、CSRF、中间件
大纲 二.session 1.session与cookie对比 2.session基本原理及流程 3.session服务器操作(获取值.设置值.清空值) 4.session通用配置(在配置文件中) 5 ...
- CTFcracktools——非常实用的CTF解密工具
做bugku的crypto题时偶然发现了这个,吐血推荐!! 十分全面好用 整合了常见的解码.进制转换等CTF常用的工具: 下载地址: https://github.com/0Linchen/CTFCr ...
- 曝Wi-Fi重大缺陷:你浏览的或是个假网站
今年央视315晚会上曝光的Wi-Fi探针收集用户信息的热度还未消退,阿里安全专家研究发现了Wi-Fi的重大新问题:基于WPA/WPA2设计上存在的一些缺陷,用户在使用公共Wi-Fi时,被攻击者钓鱼,进 ...
- Oracle表之间关联更新
经常会遇到一个表需要根据另一个表数据来更新数据,总结了核心的sql脚本命令如下: A表如下x y--------------ka dakb dbkc ...
- windows无法完成安装,若要在此计算机上安装,请重新启动安装
当出现如上提示的时候,不要重启,按下shift+f10 会打开命令窗口,先输入cd oobe 进入到C:\windows\system32\oobe文件夹,输入msoobe回车然后输入msoobe即可 ...
- 【XSY3344】连续段 DP 牛顿迭代 NTT
题目大意 对于一个长度为 \(n\) 的排列 \(p\),我们称一个区间 \([l,r]\) 是连续的当且仅当 \((\max_{l\leq i\leq r}a_i)-(\min_{l\leq i\l ...
- 【XSY2851】蛋糕 数学
题目大意 有一个边长为 \(1\) 的正 \(n\) 边形,你要把这个正 \(n\) 边形放到一个正 \(m\) 边形里面,且两个多边形的中心重合. 问你这个正 \(m\) 边形的边长最小是多少. \ ...