05-事件循环

news2024/9/21 3:03:43

事件循环

以下知识点都涉及到事件循环

计时器，promise，ajax，node

明白此知识点，是前端的分水岭，可以提高效率，js中奇怪的东西都可以得到解决，整个过程是根据W3C和谷歌源码进行

浏览器的进程模型

何为进程？

程序运行需要有它自己专属的内存空间，可以把这块内存空间简单理解为进程

 每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

 进程设计的好处是为了隔离

何为线程？

有了进程以后，就可以运行程序的代码了。

运行代码的‘人’称之为‘线程’。

一个进程至少要有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。

如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

浏览器有哪些进程和线程？

浏览器是一个多进程多线程的应用程序

浏览器内部工作极其复杂，复杂程度接近操作系统了

为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，他会自动启动多个进程

 

 目前是一个标签页一个进程

渲染主线是如何工作的？

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

  • 解析HTML
  • 解析CSS
  • 计算样式
  • 布局
  • 处理图层
  • 每秒把页画面60次
  • 执行全局JS代码
  • 执行事件处理函数
  • 执行计时器回调函数
  • ......

思考: 为什么渲染进程不适用多个线程来处理这些事情？（工作2-3年再来思考）

要处理这么多任务，主线程遇到了一个前所未有的难题：如何调度任务？

比如：

  • 我正在执行一个JS函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗？不能，它会把点击事件加到任务队列
  • 我正在执行一个JS函数，执行到一半的时候某个计时器到达了事件，我该立即去执行它的回调吗？
  • 浏览器进程通知我“用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪一个呢？
  • ......

渲染主线程想出了一个绝妙的注意来处理这个问题：排队

 1、在最开始的时候，渲染主线程会进入一个无限循环

while(true) {
    
}

2、每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。

3、其他所有进程（包括其他进程的进程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务。

这样一来，就可以让每个任务有条不紊的、持续的进行下去了。

整个过程，被称之为事件循环（消息循环）

若干解释

先上代码

setTimeout(function () {
	console.log(1);
}, 3000)
console.log(2);

同步的话，会等3秒，先输出1，再输出2  ——  阻塞渲染主线程

异步的话，立即输出2，等3秒输出1  ——  

何为异步？

 代码在执行过程中，会遇到一些无法立即处理的任务，比如：

  • 计时完成后需要执行的任务 —— setTimeout、setInterval
  • 网络通信完成后需要执行的任务 —— XHR、Fetch
  • 用户操作后需要执行的任务 —— addEventListener

如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于 "阻塞" 的状态，从而导致浏览器 "卡死"

 以下是同步的过程：

渲染主线程承担着及其重要的工作，无论如何都不能阻塞！

因此，浏览器选择异步来解决这个问题

以下是异步的过程：

使用异步的方式，渲染主线程永不阻塞

面试题，如何理解JS的异步？

200分的回答：

JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。

而渲染主线程承担着诸多的工作，渲染页面、执行JS都在其中运行。

如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。

这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。

所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息的队列的末尾排队，等待主线程调度执行。

在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

JS为何会阻碍渲染？

先看代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>hello is loop</h1>
	<button>change</button>
	<script>
		let h1 = document.querySelector('h1')
		let btn = document.querySelector('button')
		/* 死循环指定时间 */
		function delay(duration) {
			let start = Date.now();
			while (Date.now() - start < duration) {}
		}
		btn.onclick = function() {
			h1.textContent = '我变了！';
			delay(3000);
		}
	</script>
</body>
</html>

点击按钮会发生什么？

卡死， 3秒后变成文字

 这中间发生了什么？

执行顺序是这样的：onclick点击事件→改变h1文本内容→执行delay函数→绘制

第二步的时候文本内容早就改了，只是还没有绘制，所以这里3秒延迟过后才看到页面改变

如果在这过程中，无论做了别的什么事情，都要排队，就是说这3秒是必须等的

所以不要让JS运行太长时间，否则页面就会卡顿

所以JS阻碍渲染，是因为JS和渲染都在浏览器的渲染主线程上！

在react中用fiber解决这个问题

任务有优先级吗？

任务没有优先级，在消息队列中先进先出

但消息队列是有优先级的

W3C原来是分成宏任务和微任务的，但现在抛弃了这中说法，因为满足不了现在复杂的任务类型，比如现在有网络任务，计时器任务，交互任务

根据W3C的最新解释：

每个任务队列都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属不同的队列。在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。

浏览器必须准备好一个微队列（microtask queue），微队列中的任务优先于其他所有任务执行

 延时队列：计时器 

交互队列：用户点击，改变窗口大小，鼠标事件，键盘事件

微队列：promise，MutationObserver

 上代码

例1：

计时器延迟0秒

setTimeout(function () {
	console.log(1);
}, 0)
console.log(2);

执行结果：先输出2再输出1，为什么？同步代码优先于延时队列

 

 

执行过程：先执行全局JS，把计时器函数放到其他线程中等待执行，0秒所以直接加到延时队列中，计时器先放着，主线程继续往下执行，输出2，全局结束后再看，微队列没有，交互队列没有，来到延时队列，所以执行计时器函数，输出1。

例2：

计时器延迟0秒，加一个死循环1秒的函数

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta
		name="viewport"
		content="width=device-width, initial-scale=1.0"
	/>
	<title>Document</title>
</head>

<body>
	<script>
		function delay (duration) {
			let start = Date.now()
			while (Date.now() - start < duration) { }
		}

		setTimeout(function () {
			console.log(1)
		}, 0)

		delay(1000);

		console.log(2);

	</script>
</body>

</html>

执行结果：1秒后先输出2再输出1，为什么？

执行过程：先执行全局JS，把计时器加到其他线程，0秒所以直接加到延时队列，主线程往下执行，1秒死循环被执行，往下输出2，再看任务队列，微队列没有，交互队列没有，来到延时队列，

输出1。

 

 

 

 例3：

加一个微队列promise看看会怎么执行？

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta
		name="viewport"
		content="width=device-width, initial-scale=1.0"
	/>
	<title>Document</title>
</head>

<body>
	<script>
		
		setTimeout(function () {
			console.log(1)
		}, 0)

		Promise.resolve().then(function() {
			console.log(2);
		})

		console.log(3);

	</script>
</body>

</html>

执行结果：直接输出 3 2 1 ，为什么？

执行过程：先执行全局JS，将计时器放到其他线程，延时0秒所以直接放到延时任务中，主线程继续执行，将promise放到微队列，继续执行，输出3，检查任务队列，先执行promise，输出2，交互队列没有，来到延时队列，最后输出1。

 

 

 

 例4：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta
		name="viewport"
		content="width=device-width, initial-scale=1.0"
	/>
	<title>Document</title>
</head>

<body>
	<script>

		setTimeout(function () {
			console.log(1)
		}, 0)

		function delay(duration) {
			let start = Date.now();
			while (Date.now() - start < duration) {}
		}

		delay(3000);

		console.log(2);

	</script>
</body>

</html>

执行结果：3秒后先输出2后输出1。

例5：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta
		name="viewport"
		content="width=device-width, initial-scale=1.0"
	/>
	<title>Document</title>
</head>

<body>
	<script>
		function a() {
			console.log(1);
			Promise.resolve().then(function () {
				console.log(2);
			})
		}

		setTimeout(function () {
			console.log(3);
			Promise.resolve().then(a);
		}, 0)

		Promise.resolve().then(function() {
			console.log(4);
		})

		console.log(5);

	</script>
</body>

</html>

执行结果：5 4 3 1 2

执行过程：

主线程：执行全局JS，a函数未调用略过，来到settimeout，放入延时队列：settimeout排队，promise加入微队列，回到主线程输出5，全局结束，微队列：promise输出4，然后执行settimeout，输出3，将promise放到微队列，settimeout运行结束，运行a函数，输出1，把promise放到微队列，执行输出2。

 

 

 

 

 

 一般面试题将promise+事件循环+setTimeout结合来考察

面试题：阐述一下JS的事件循环

 事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。

在Chrome的源码中，它开启一个不会结束的for循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。

过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。

根据W3C官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

面试题：JS中的计时器能做到精确计时吗？为什么？ 

不行，因为

  1. 计算机硬件没有原子钟，无法做到精确计时；
  2. 操作系统的计时函数本身就有少量偏差，由于JS的计时器最终调用的是操作系统的函数（苹果和安卓），也就懈怠了这些偏差；
  3. 按照W3C标准，浏览器实现计时器时，如果嵌套层级超过5层，则会带有4毫秒的最少时间，这样在计时时间少于4毫秒时又带来了偏差；
  4. 受事件循环影响，计时器的回调函数只能在主线程空闲时运行（先完成微队列和交互队列，才轮到延时队列），因此又带来了偏差。

 总结：

单线程是异步产生的原因

事件循环是异步的实现方式

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/675409.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

一文理解cast转换

一文理解cast转换

目录 写在前边 1. what&#xff1f;又报错&#xff1a; 2. 靠&#xff0c;难道是这样&#xff1f; 3. 小试牛刀 4. 实际中的“坑” 写在后边 写在前边 关于$cast转换的结论无外乎以下四条&#xff1a; 如果将子类句柄复制给父类句柄&#xff0c;可以实现父类句柄的向下转换…
阅读更多...
翻筋斗觅食策略改进灰狼算法

翻筋斗觅食策略改进灰狼算法

目录 一、动态扰动因子策略 二、翻筋斗觅食策略 三、改进灰狼算法收敛曲线图 灰狼优化算法(grey wolf optimization,GWO)存在收敛的不合理性等缺陷&#xff0c;目前对GWO算法的收敛性改进方式较少&#xff0c;除此之外&#xff0c;当GWO迭代至后期&#xff0c;所有灰狼个体…
阅读更多...
企业版：Select.PDF Library for .NET

企业版：Select.PDF Library for .NET

HTML 到 PDF API SelectPdf提供了一个REST API&#xff0c;可用于通过我们的专用云服务将html转换为任何语言的pdf。 另存为 PDF 链接 以非常简单的方式将“转换为PDF”功能添加到您的网站或博客。只需添加一个指向您的网页的链接&#xff0c;您就完成了。 适用于 .NET 的 PD…
阅读更多...
Redis 通用命令

Redis 通用命令

通用命令介绍 Redis 通用命令是一些 Redis 下可以作用在常用数据结构上的常用命令和一些基础的命令&#xff0c;比如删除键、对键进行改名、判断键是否存在等。简单说&#xff0c;就是 keys 分类的命令&#xff0c;如下图。 上图中圈中的部分&#xff0c;就是所谓的通用的命令…
阅读更多...
chatgpt赋能python：Python对于SEO的重要性：浏览网页的技术分析

chatgpt赋能python：Python对于SEO的重要性：浏览网页的技术分析

Python对于SEO的重要性&#xff1a;浏览网页的技术分析 越来越多的网站需要搜索引擎优化&#xff08;SEO&#xff09;&#xff0c;以便他们的网站上的内容能够被更多人浏览与访问。这就要求我们使用一些工具和技术&#xff0c;例如Python&#xff0c;来帮助我们分析网页的技术…
阅读更多...
通过调整图像hue值并结合ImageEnhance库以实现色调增强

通过调整图像hue值并结合ImageEnhance库以实现色调增强

前言 PIL库中的ImageEnhance类可用于图像增强&#xff0c;可以调节图像的亮度、对比度、色度和锐度。 通过RGB到HSV的变换加调整可以对图像的色调进行调整。 两种方法结合可以达到更大程度的图像色调增强。 调整hue值 __author__ TracelessLe __website__ https://blog…
阅读更多...
linux 下查看 USB 设备

linux 下查看 USB 设备

文章目录 前言目录内容详解usb11-0:1.01-1.1:1.0 结构图设备信息bDeviceClassversionbusnum & devnumdevbMaxPoweridVendor & idProductproductmanufacturerbcdDevicespeedueventbmAttributesdrivers_autoprobe 前言 在 sysfs 文件系统下&#xff0c;查看 USB 设备&am…
阅读更多...
PaddleOCR #使用PaddleOCR进行光学字符识别（PP-OCR文本检测识别）

PaddleOCR #使用PaddleOCR进行光学字符识别（PP-OCR文本检测识别）

引言&#xff1a; PaddleOCR 是一个 OCR 框架或工具包&#xff0c;它提供多语言实用的 OCR 工具&#xff0c;帮助用户在几行代码中应用和训练不同的模型。PaddleOCR 提供了一系列高质量的预训练模型。这包含三种类型的模型&#xff0c;使 OCR 高度准确并接近商业产品。它提供文…
阅读更多...
【Unity 2D AABB碰撞检测】铸梦之路

【Unity 2D AABB碰撞检测】铸梦之路

作者介绍&#xff1a;铸梦xy。IT公司技术合伙人&#xff0c;IT高级讲师&#xff0c;资深Unity架构师&#xff0c;铸梦之路系列课程创始人。 目录1.AABB 碰撞介绍2.常用2D碰撞盒3.为什么要学习如何编写碰撞检测4.2D BOX & BOX 碰撞检测原理和代码5.2D BOX &Shpere 碰撞检…
阅读更多...
Linux信号编程、signal函数范例详解( 4 ) -【Linux通信架构系列 】

Linux信号编程、signal函数范例详解( 4 ) -【Linux通信架构系列 】

系列文章目录 C技能系列 Linux通信架构系列 C高性能优化编程系列 深入理解软件架构设计系列 高级C并发线程编程 期待你的关注哦&#xff01;&#xff01;&#xff01; 现在的一切都是为将来的梦想编织翅膀&#xff0c;让梦想在现实中展翅高飞。 Now everything is for the…
阅读更多...
chatgpt赋能python：Python求1是什么？Python求1在SEO中的应用

chatgpt赋能python：Python求1是什么？Python求1在SEO中的应用

Python求1是什么&#xff1f;Python求1在SEO中的应用 介绍Python求1 Python求1&#xff0c;也叫做1-bit计数器&#xff0c;是一种用来统计网页浏览量的技术。在Web开发中&#xff0c;我们需要记录网页的浏览次数&#xff0c;以便了解网站的流量和用户的使用情况。传统的做法是…
阅读更多...
chatgpt赋能python：Python求绝对值：从初学者到高级工程师的必备知识

chatgpt赋能python：Python求绝对值：从初学者到高级工程师的必备知识

Python求绝对值&#xff1a;从初学者到高级工程师的必备知识 Python是一种有趣且功能强大的编程语言。它非常易于学习&#xff0c;同时又具有广泛的应用领域&#xff0c;比如Web开发、数据分析、机器学习和人工智能等。在Python的数学运算中&#xff0c;求绝对值是一个常见的需…
阅读更多...
chatgpt赋能python：Python浮点型的两种表示方法

chatgpt赋能python：Python浮点型的两种表示方法

Python浮点型的两种表示方法 Python是一种解释型的动态语言&#xff0c;可以处理多种数据类型。其中&#xff0c;浮点型是其中一种数据类型&#xff0c;它包括十进制和科学计数法两种表示方法。 十进制表示法 十进制浮点数是Python的基本浮点类型&#xff0c;可以表示实数。…
阅读更多...
2023 hnust 湖南科技大学 大数据技术与应用 期末考试 复习资料

2023 hnust 湖南科技大学 大数据技术与应用 期末考试 复习资料

前言 感谢&#xff1a;lqx&#xff08;主要内容来源&#xff09;&#xff0c;hqh 有自己的理解和魔改 可以参考的资料 课后题答案我爬取的老师布置的学习通课后题往年资料csdn里面找到的&#xff1a;1、2老师ppt上课划重点录音 不提供pdf文件&#xff0c;方便修改&#xff0…
阅读更多...
探索技术极致，未来因你出‘粽’

探索技术极致，未来因你出‘粽’

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…
阅读更多...
chatgpt赋能python：Python游戏——为什么它成为未来最热门的游戏开发工具

chatgpt赋能python：Python游戏——为什么它成为未来最热门的游戏开发工具

Python游戏——为什么它成为未来最热门的游戏开发工具 在游戏开发中&#xff0c;Python一直是非常强大和受欢迎的语言。Python具有很多吸引人的特点和实用功能&#xff0c;它为游戏开发者提供了多种可能&#xff0c;我们在本文中将介绍Python游戏以及为什么它越来越受欢迎。 …
阅读更多...
【从零开始学习JAVA | 第十一篇】ArrayList集合

【从零开始学习JAVA | 第十一篇】ArrayList集合

目录 前言&#xff1a; ArrayList&#xff1a; 常用成员方法&#xff1a; 案例练习&#xff1a; 1.集合的遍历方式&#xff08;引用数据类型&#xff09;&#xff1a; 2&#xff1a;集合的遍历方式&#xff08;基本数据类型&#xff09;&#xff1a; 总结&#xff1a;…
阅读更多...
一面、二面、三面有什么区别？

一面、二面、三面有什么区别？

很多公司面试都分一面、二面、三面甚至更多&#xff0c;大家可能会好奇&#xff0c;为什么要面这么多面&#xff0c;每一面又有啥区别呢&#xff1f; 首先我来回答下为什么要这么多面&#xff0c;最核心的是最后3点&#xff1a; 如果光是一个人面&#xff0c;担心会看走眼&…
阅读更多...
python基础学习6【DatatimeIndex与PeriodIndex函数+Timedelta类+连接数据库+agg()函数和aggregate()函数】

python基础学习6【DatatimeIndex与PeriodIndex函数+Timedelta类+连接数据库+agg()函数和aggregate()函数】

转换与处理时间序列数据 转换字符串时间为标准时间: Timestamp类型&#xff1a;最基础最常用。 pd.to_datetime(data[lock_time])#转换 如果超出时间戳最大值&#xff0c;最小值&#xff0c;时间戳存储可能不成功 &#xff1a; DatatimeIndex与PeriodIndex函数【其实俺暂时…
阅读更多...
【Spring Cloud Sleuth 分布式链路跟踪】 —— 每天一点小知识

【Spring Cloud Sleuth 分布式链路跟踪】 —— 每天一点小知识

&#x1f4a7; S p r i n g C l o u d S l e u t h 分布式链路跟踪 \color{#FF1493}{Spring Cloud Sleuth 分布式链路跟踪} SpringCloudSleuth分布式链路跟踪&#x1f4a7; &#x1f337; 仰望天空&#xff0c;妳我亦是行人.✨ &#x1f984; 个人主页——微风撞见云…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023