事件循环--Event Loop （Chrome又称为消息循环 -- Message Loop）

已于 2023-10-14 14:58:34 修改
阅读量414 收藏 3
点赞数
文章标签： 前端 html javascript
于 2023-05-18 23:26:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mlayc/article/details/130757171
版权

单线程是异步产生的原因，事件循环是异步的实现方式。

以往对事件循环的理解只停留在微任务和宏任务之间，现在W3C重新对事件循环进行了定义，取消了宏任务，取而代之的是不同的消息队列，微任务依旧保留，优先级为最高。

目录

首先需要了解浏览器进程

什么是进程

 什么是线程

 浏览器有哪些进程和线程

 渲染主线程：

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

那么是如何排队的呢？

为什么要使用异步？ 

如何理解异步？ 

 排队的任务有优先级吗？

 事件循环总结

 Js中的计时器能做到精准计时吗？为什么？

首先需要了解浏览器进程

什么是进程

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

每个应用至少有一个进程，进程之间相互独立，可以有效防止一个进程崩溃影响到其他进程，即使要通信，也要双方同意

 什么是线程

有了进程之后就可以运行程序代码了，运行代码的【人】称之为【线程】

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程，该线程称为主线程

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

 浏览器有哪些进程和线程

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

内部工作是极其复杂的，复杂程度不亚于一个操作系统

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

其中最主要的进程有：

  1. 浏览器进程：主要负责界面展示、用户交互、子进程管理，浏览器进程内部会启动多个线程处理不同任务。
  2. 网络进程：负责加载网络资源，网络进程内部同样会启动多个线程来处理不同网络任务
  3. 渲染进程：渲染进程启动后，会开启一个渲染主线程，主线程负责执行HTML,CSS,JS迪马默认情况下，浏览器回味每个标签页面开启一个新得渲染进程，以保证每个标签页之间不受影响

 渲染主线程：

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

解析html，

解析css ，

计算样式（em换算px等），

布局，

处理图层（z-index顺序等），

每秒画页面60次（60fps），

执行全局js代码，

执行事件处理函数，

执行计时器的回调等等

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

比如：

  1. 正在执行js函数，执行到一半用户点击按钮我该立即去执行点击事件的处理函数吗？
  2. 正在执行js函数，执行到一半的时候某个计时器到达了时间，我改改立即去执行他的回调吗？
  3. 浏览器进程通知我”用户点击了按钮”，于此同时某个计时器也到达了时间，我应该处理哪一个呢？
  4. ...

渲染主线程想到了一个绝妙的主意：排队

那么是如何排队的呢？

  1. 在最开始的时候 ，渲染主线程会进入一个无限的循环
  2. 每一次的循环会检查消息队列当中是否有任务存在，如果有，就取出第一个任务，执行完一个后进入下一次循环，如果没有，进入休眠状态
  3. 其他所有线程（包括其他线程的进程）随时可以向消息队列添加任务，新任务都会加到消息队列的末尾，在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿去任务

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

为什么要使用异步？ 

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

  1. 计时器完成后需要执行的任务 -seTimeout setInterval
  2. 网络通信完成后需要执行的人任务 xhr，fetch
  3. 用户操作后需要执行的任务 addEventListener

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

举个例子：堵车 = 阻塞

为什么堵车的时候让人愤怒呢？因为你有事情要做而这个堵车耽误了你的进度，这就是阻塞

并且主线程还有个任务就是画页面（fps=60），卡死的时候线程无法进行画页面

所以为了避免以上的情况发生，使用了异步的方式，好处就是渲染主线程永不阻塞

如何理解异步？ 

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

而渲染主线程承担诸多工作：如渲染页面，执行js，解析html,css，布局等都在其中运行

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

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

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

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

 排队的任务有优先级吗？

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

但是消息队列是由优先级的

根据w3c最新解释：

  1. 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列，再一次事件循环中，可以根据实际情况从不同的队列中取出执行任务
  2. 浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行。

随着浏览器复杂程度的急剧提升，w3c不在使用宏队列的说法

目前在chrome浏览器中，至少包含了下面的队列

  1. 延时队列:用于存放计时器达到后的回调任务，优先级【中】
  2. 交互队列（如点击事件）：用于存放用户操作后产生的事件处理任务，优先级【高】

     3.微队列：用户存放需要最快执行的任务，优先级【最高】

 事件循环总结

死循环源码： 

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

在chrome源码中，他开启一个不会结束的for循环    // for（；；）{}

每次循环都从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务添加到队列末尾即可

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

根据w3c官方解释，每个任务都有不同的类型，同类型的任务必须在同一个消息队列，不同的任务可以属于不同的队列，不同的队列有不同的优先级，再一次事件循环中，由浏览器自行决定取哪一个队列的任务（这也是浏览器之间的差异来源之一），但是浏览器必须要有一个微队列，并且微队列的任务以顶要具有最高的优先级，必须优先调度执行

 Js中的计时器能做到精准计时吗？为什么？

源码：

 

不可以

  1. 计算机没有原子钟，无法精确计时
  2. 操作系统的计时函数本身就有少量偏差，js最终调用的是操作系统函数，也就携带了这些偏差
  3. 按照w3c标准，浏览器实现计时器时，如果嵌套层级超过5层，则会带有4浩渺的最少事件，这样在计时器时间少于4毫秒又带来了偏差

     4. 受到事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差

mlayc
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
chromium消息机制
愤怒的菜鸟
09-28 394
Chromium的线程模型和消息循环机制一直是其很有亮点也非常值得学习的一部分，关于这部分的工作原理网上有很多好文章，比如这篇、这篇还有这篇。但是这几篇文章基本是站在一定的高度上来概括其思想，而深入到代码里还有一些流程及细节问题，在此略做总结。 首先，在线程启动时基本会按以下流程来启动消息循环： #1base::MessagePumpLibevent::Run base/message_pum
Chrome中的消息循环
weixin_34320159的博客
10-15 185
主要是自己做个学习笔记吧，我经验也不是很丰富，以前学习多线程的时候就感觉写多线程程序很麻烦。主要是线程之间要通信，要切线程，要同步，各种麻烦。我本身的工作经历决定了也没有太多的工作经验，所以chrome的messageloop可以说是我用到的第一个成熟的线程消息封装库，用的很简单，舒服。主要涉及MessageLoop和MessagePump这两个类系。 以前不太清楚chrome当时在设计这两...
Chrome MessageLoop类分析
optman的专栏
12-14 570
Windows程序是基于消息的，不管其封装形式如何，最后都要包含如下代码MSG msg; while(GetMesssage(&msg)) { TranslateMessage(&msg); DispatchMessage(&msg); }  大部分的工作都是在这个while循环里完成。 GetMessage获得一条消息，然后调用DispatchMes...
理解WebKit和Chromium: 消息循环(Message Loop)
923723914
01-24 276
转载请注明出处：http://blog.csdn.net/milado_nju/ # 消息循环 ## 概述 前面介绍了线程间如何传递chromium自定义任务(task)，那么在线程内，消息循环（messageloop）是如何处理这所有的消息和任务呢？本章节重点介绍消息循环的工作原理。 在Chromium里，需要处理三种类型的消息：chromium自定义的任务，Socket或者文件等IO操...
Message Loop 原理及应用
weixin_34318326的博客
10-17 401
此文已由作者王荣涛授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。Message loop，即消息循环，在不同系统或者机制下叫法也不尽相同，有被叫做event loop，也有被叫做run loop或者其他名字的，它是一种等待和分派消息的编程结构，是经典的消息驱动机制的基础。为了方便起见，本文对各系统下类似的结构统称为message loop。结构Message loop，顾名...
JS事件循环机制event loop宏任务微任务原理解析
10-14
主要介绍了JS事件循环机制event loop宏任务微任务原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
深入分析JavaScript 事件循环(Event Loop)
10-15
主要介绍了JavaScript 事件循环(Event Loop)的的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
JavaScript运行机制之事件循环(Event Loop)详解
10-25
主要介绍了JavaScript运行机制之事件循环(Event Loop)详解,本文从多个方面讲解了Event Loop,需要的朋友可以参考下
event-loop:PHP的简单事件循环实现
05-02
简单事件循环 该库不是供生产使用的，而是向PHP开发人员展示工作方式。 如果要在PHP中寻找生产就绪的事件循环实现，请尝试 。 这个怎么运作 事件循环提供了一种实现异步执行的方法，而无需依赖于操作系统来执行...
javascript中的event loop事件循环详解
10-17
主要给大家介绍了关于javascript中event loop事件循环的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
chromium 消息循环跨线程通信使用案例（C++）
04-25
chromium message loop 封装使用的一个跨线程通信demo，内含有chromium base库（部分抽取），以及消息循环跨线程通信的一个使用案例。
Chrome的线程模型和消息循环
02-21 422
看Chrome已经有一段时间了，但是一直都没有沉淀些内容下来，是该写写笔记什么的了，免得自己忘记了。看的都是Windows平台下的代码，所以记录也都是记录的。。。废话。。 那么首先，先从最基础的东西记录起吧：Chrome的线程模型和消息循环。 多线程的麻烦 多线程编程一直是一件麻烦的事情，线程执行的不确定性，资源的并发访问，一直困扰着众多程序员们。为了解决多线程编程的麻烦，大家想出了很多经典
JS事件循环messageLoop（事件轮询eventLoop）
zhizhan888的博客
01-17 504
一文教你彻底搞懂事件轮询/事件循环/消息循环
Chrome MessageLoop
hunter
10-09 773
https://blog.csdn.net/ljm198745/article/details/40682951 https://blog.csdn.net/qq3401247010/article/details/78286506     https://blog.csdn.net/fingding/article/details/34088277    Android 平台下：   ...
chromium中的消息循环
风之彼岸
11-01 5284
这篇文章会更加深入地讲解chromium的线程，通常为了保证ui的响应速度，防止io阻塞和复杂计算卡死ui，会把io任务和复杂计算的任务放到其它线程中运行。由于反复创建线程会增加系统负担，在设计的时候通常不会把任务交给线程，在线程运行完成后直接退出线程。chromium中每一个线程都会有一个消息循环MessageLoop，接收来自其它线程的任务，在处理完成后接着处理下一个任务，当没有任务时，挂起线
chromium之MessageLoop浅析
weixin_30839881的博客
05-13 326
对chromium的MessageLoop非常感兴趣，接下来会详细分析Windows平台的具体实现。 代码版本：chromium-4.0.210.0_p26329 先看一下依赖的文件 message_loop.cc #include "base/message_loop.h" #include <algorithm> #include "base...
基于Message Loop的读书笔记
晓风残月xj
09-08 880
背景：      在看Windows编程时经常遇到这样的一个循环： while(GetMessage(&Msg, NULL, 0, 0) > 0) { TranslateMessage(&Msg); DispatchMessage(&Msg); }           不习惯可视化编程的我开始完全不理解，于是查看了相关资料，形成了一些自己的看法。           messa
Chomium MessageLoop实现原理
hang_ning的博客
11-20 1370
Chromium Message Loop 主要类和功能 MessagePump(LibEvent) 如果是UI线程和IO线程会使用MessagePumpLibEvent 实现，其他线程则使用MessageDefault. 前者利用libEvent 的事件驱动特性，后者使用event 信号来控制线程阻塞和唤醒。 当线程启动时，线程的入口函数ThreadMain会创建并启动 MessagePump, 开始任务轮转，该类会不断的向ThreadControllerWithMessagePumpImpl 发出D
事件循环(谷歌浏览器称消息循环messageloop)
最新发布
weixin_62460190的博客
08-02 210
本篇文章将会结合浏览器(google浏览器为例)源码及W3C标准从讲解事件循环的实现方式。
redis-plus-plus EventLoop 怎么开启循环
05-24
在 redis-plus-plus 中，EventLoop 是由 RedisAsyncConnection 类管理的。要启动 EventLoop 的循环，可以使用 RedisAsyncConnection::loop() 方法。该方法会一直阻塞直到循环停止。例如： ```c++ #include <sw/redis++/redis++.h> using namespace sw::redis; int main() { RedisAsyncConnection conn; conn.connect("127.0.0.1", 6379); // 执行一些 Redis 命令 conn.command("SET", "key", "value"); // 启动 EventLoop 循环 conn.loop(); return 0; } ``` 在这个例子中，我们创建了一个 RedisAsyncConnection 对象，并使用 connect() 方法连接到了 Redis 服务器。然后，我们执行了一个 Redis 命令，将键 "key" 的值设置为 "value"。最后，我们调用了 loop() 方法，这会启动 EventLoop 的循环。循环会一直运行，直到程序退出或者调用 RedisAsyncConnection::disconnect() 方法停止循环。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值