浏览器的事件循环机制(Event loop)

2023-12-16

事件循环

浏览器的进程模型

何为进程?

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

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

何为线程?

有了进程后,就可以运行程序的代码了。
运行代码的「人」称之为「线程」。
一个进程至少有一个线程,所以在进程开启后会自动创建一个线程来运行代码,该线程称之为主线程。
如果程序需要同时执行多块代码,主线程就会启动更多的线程来执行代码,所以一个进程中可以包含多个线程。

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

浏览器是一个多进程多线程的应用程序
浏览器内部工作极其复杂。
为了避免相互影响,为了减少连环崩溃的几率,当启动浏览器后,它会自动启动多个进程。

可以在浏览器的任务管理器中查看当前的所有进程
其中,最主要的进程有:

  1. 浏览器进程主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。
  2. 网络进程负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。
  3. 渲染进程 (本节课重点讲解的进程)渲染进程启动后,会开启一个 渲染主线程 ,主线程负责执行 HTML、CSS、JS 代码。默认情况下,浏览器会为每个标签页开启一个新的渲染进程,以保证不同的标签页之间不相互影响。将来该默认模式可能会有所改变,有兴趣的同学可参见 chrome官方说明文档

渲染主线程是如何工作的?

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

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

思考题:为什么渲染进程不适用多个线程来处理这些事情?
要处理这么多的任务,主线程遇到了一个前所未有的难题:如何调度任务?
比如:

  • 我正在执行一个 JS 函数,执行到一半的时候用户点击了按钮,我该立即去执行点击事件的处理函数吗?
  • 我正在执行一个 JS 函数,执行到一半的时候某个计时器到达了时间,我该立即去执行它的回调吗?
  • 浏览器进程通知我“用户点击了按钮”,与此同时,某个计时器也到达了时间,我应该处理哪一个呢?

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

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

这样一来,就可以让每个任务有条不紊的、持续的进行下去了。
整个过程,被称之为事件循环(消息循环)

若干解释

何为异步?

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

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

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

渲染主线程承担着极其重要的工作,无论如何都不能阻塞!
因此,浏览器选择 异步 来解决这个问题

使用异步的方式, 渲染主线程永不阻塞
面试题:如何理解 JS 的异步?
参考答案:
JS是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中,而渲染主线程只有一个。
而渲染主线程承担着诸多的工作,渲染页面、执行 JS 都在其中运行。
如果使用同步的方式,就极有可能导致主线程产生阻塞,从而导致消息队列中的很多其他任务无法得到执行。这样一来,一方面会导致繁忙的主线程白白的消耗时间,另一方面导致页面无法及时更新,给用户造成卡死现象。
所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时,比如计时器、网络、事件监听,主线程将任务交给其他线程去处理,自身立即结束任务的执行,转而执行后续代码。当其他线程完成时,将事先传递的回调函数包装成任务,加入到消息队列的末尾排队,等待主线程调度执行。
在这种异步模式下,浏览器永不阻塞,从而最大限度的保证了单线程的流畅运行。

JS为何会阻碍渲染?

先看代码

<h1>Mr.Yuan is awesome!</h1>
<button>change</button>
<script>
  var h1 = document.querySelector('h1');
  var btn = document.querySelector('button');

  // 死循环指定的时间
  function delay(duration) {
    var start = Date.now();
    while (Date.now() - start < duration) {}
  }

  btn.onclick = function () {
    h1.textContent = '袁老师很帅!';
    delay(3000);
  };
</script>

点击按钮后,会发生什么呢?
<见具体演示>

任务有优先级吗

任务没有优先级,在消息队列中先进先出
消息队列是有优先级的
根据 W3C 的最新解释:

  • 每个任务都有一个任务类型,同一个类型的任务必须在一个队列,不同类型的任务可以分属于不同的队列。在一次事件循环中,浏览器可以根据实际情况从不同的队列中取出任务执行。
  • 浏览器必须准备好一个微队列,微队列中的任务优先所有其他任务执行 https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

随着浏览器的复杂度急剧提升,W3C 不再使用宏队列的说法
在目前 chrome 的实现中,至少包含了下面的队列:

  • 延时队列:用于存放计时器到达后的回调任务,优先级「中」
  • 交互队列:用于存放用户操作后产生的事件处理任务,优先级「高」
  • 微队列:用户存放需要最快执行的任务,优先级「最高」

添加任务到微队列的主要方式主要是使用 Promise、MutationObserver
例如:

// 立即把一个函数添加到微队列
Promise.resolve().then(函数)

浏览器还有很多其他的队列,由于和我们开发关系不大,不作考虑

面试题

阐述一下 JS 的事件循环

参考答案:
事件循环又叫做消息循环,是浏览器渲染主线程的工作方式。
在 Chrome 的源码中,它开启一个不会结束的 for 循环,每次循环从消息队列中取出第一个任务执行,而其他线程只需要在合适的时候将任务加入到队列末尾即可。
过去把消息队列简单分为宏队列和微队列,这种说法目前已无法满足复杂的浏览器环境,取而代之的是一种更加灵活多变的处理方式。
根据 W3C 官方的解释,每个任务有不同的类型,同类型的任务必须在同一个队列,不同的任务可以属于不同的队列。不同任务队列有不同的优先级,在一次事件循环中,由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列,微队列的任务一定具有最高的优先级,必须优先调度执行。

JS 中的计时器能做到精确计时吗?为什么?

参考答案:
不行,因为:

  1. 计算机硬件没有原子钟,无法做到精确计时
  2. 操作系统的计时函数本身就有少量偏差,由于 JS 的计时器最终调用的是操作系统的函数,也就携带了这些偏差
  3. 按照 W3C 的标准,浏览器实现计时器时,如果嵌套层级超过 5 层,则会带有 4 毫秒的最少时间,这样在计时时间少于 4 毫秒时又带来了偏差
  4. 受事件循环的影响,计时器的回调函数只能在主线程空闲时运行,因此又带来了偏差

参考:

https://ke.qq.com/course/5892689/13883864042302033#term_id=106109971

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

浏览器的事件循环机制(Event loop) 的相关文章

  • 有关res://ieframe.dll/dnserrordiagoff_webOC.htm# http://www.51hainuo.cn

    有关这个 res ieframe dll dnserrordiagoff webOC htm http www 51hainuo cn 大部分的人应该会觉得是dns错误或者dns解析本机不正常 然后就去找杀毒软件来杀毒 网上我搜索的到的很多
  • 解决chrom浏览器iframe嵌套写cookie问题

    chrom浏览器iframe嵌套写cookie 1 请求地址协议 2 response头部设置 3 提供如下方式进行设置 1 后端web服务代码如下 2 nginx服务器设置 场景分析描述 chrom浏览器环境下当前网站被第三方iframe
  • cookie 和session 的区别详解

    原文地址 http www cnblogs com shiyangxt archive 2008 10 07 1305506 html 这些都是基础知识 不过有必要做深入了解 先简单介绍一下 二者的定义 当你在浏览网站的时候 WEB 服务器
  • 学习日记--8.5--linux初装

    1 用xmms播放mp3 首先linux自带的xmms缺少一个插件 可以先下载并且安装 xmms mpg123 1 2 7 13 i386 rpm 但是如此之后可能还不可以使用 播放一秒就死住 这时候 在xmms 运行后之上点击 右键 gt
  • 【图像处理】索引色 抖色 反锯齿

    图片内容请参考 http www softii com cms article 5560 html 索引色 一些比较老旧的电脑相关硬件和文件格式只能处理 8 位的像素 3 个色频在 8 位的显示设备上所能表现的色彩范围实在是太少了 因此 8
  • 给浏览器设置一个图片背景/主题

    先看看效果图 此方法适用于 谷歌浏览器 chrome 火狐浏览器 firefox 360极速浏览器 QQ浏览器 360安全浏览器请移步 给360安全浏览器添加一个图片背景 主题 实现步骤 1 先在你的浏览器的插件商城里面搜索安装styluh
  • 正在开发应用于Maxthon、TT等多页面浏览器的页面模式

    经过大量的用户调查 我们发现 有不少朋友使用了Maxthon 腾讯TT 世界之窗等基于IE的多页面浏览器使用WEBCHAT 而这种模式下弹出窗口将变成一个新页面 用起来不方便
  • 浏览器兼容性测试工具

    相关连接 浏览器兼容性概述 目录 一 浏览器兼容性测试工具 1 0 IETester 免费 exe 1 1 SuperPreview 收费 exe 1 2 Adobe Browserlab 在线测试 1 3 BrowserStack 在线测
  • line-height 和 vertical-align 行高与行对齐精解 (图文)

    7 3 line height 行高指的是文本行的基线间的距离 但是文本之间的空白距离不仅仅是行高决定的 同时也受字号的影响 7 3 1 语 法 line height属性的具体定义列表如下 语法 line height normal lt
  • JavaScript与生俱来的特性---异步与回调

    线程是建立在进程的基础上的一次程序运行单位 一个进程中可以有多个线程 js单线程就意味着 所有任务需要排队 前一个任务结束 才会执行后一个任务 如果前一个任务耗时很长 后一个任务就不得不一直等着 如果是因为计算量大 CPU忙不过来 倒也合乎
  • 定制浏览器

    定制浏览器 http www vcmain com helloworld archive 11310 html helloworld 发表于 2008 9 29 14 52 00 阅读数 8 定制浏览器 作者 冯明德 浏览器控件是个典型的A
  • 解决页面中引用了谷歌字体库访问缓慢的问题

    解决页面中引用了谷歌字体库访问缓慢的问题 这段时间做一个项目的时候遇到了页面访问谷歌字体库加载缓慢的问题 因为引用了别人的页面模板 其中需要使用到谷歌字体也就是 但是为了开发和调试的方便 设置了浏览器禁止缓存 每次刷新页面非常缓慢 从chr
  • Lodop一款优秀的Web打印控件应用

    一 什么是lodop lodop取意自 load or print 是一款优秀的Web打印控件 在B S系统中 传统打印控件总是 页面看到什么才能打印什么 缺乏灵活性 使打印略显呆板 而使用lodop则可以做到 只看想看的 打印想打的 不仅
  • 简单javascript的使用

    1 javascript的简介 是基于对象和事件驱动的语言 应用于客户端 基于对象 提供了好多对象 可以直接拿过来使用 事件驱动 html做网站静态效果 javascript动态效果 客户端 专门指浏览器 js的特点 1 交互性 信息的动态
  • 使用的chorm插件 留存自用

    使用的chorm插件 留存自用 保存一下常用的插件 省的以后忘记了 啊哈哈 掘金插件 每次打开浏览器都得看上几眼 JSON handle 在线json解析 不解释了 好用 PostMan 模拟api的网络请求 The Great Suspe
  • 开发浏览器扩展程序(js脚本)

    一 打开谷歌浏览器扩展程序 二 打开 开发者模式 三 加载已解压的扩展程序 四 选择编写好的脚本文件夹 看不到文件 没关系 默认会加载 manifest json 文件 实际文件夹内容 五 加载成功 六 开始编辑脚本文件 name 扩展名字
  • 如何更改鼠标右键菜单(转载)

    复制下面的信息到记事本中 然后另存为 reg格式的文件 Windows Registry Editor Version 5 00 HKEY CLASSES ROOT doc Word Document 8 Content Type appl
  • 谷歌报错

    由于修改了一些打包配置文件导致页面跳转失败和页面资源加载失败 错误如下 在添加了vue router的情况下 使用了base导致页面加载失败 解决 合作开发中修改了打包配置导致失败 如 非生产环境下改为 即可 ps vue cli版本4 0
  • 浏览器原理篇—渲染原理

    目录导航 为什么要学习浏览器的渲染原理 浏览器的渲染流程 浏览器的渲染阻塞 浏览器的渲染优化 为什么要学习浏览器的渲染原理 知识深度挖掘 帮助更好地理解前端性能优化 从而对实现效果进行针对性优化 如 回流和重绘 渲染机制 帮助更好地理解浏览
  • 浏览器原理篇—渲染原理

    目录导航 为什么要学习浏览器的渲染原理 浏览器的渲染流程 浏览器的渲染阻塞 浏览器的渲染优化 为什么要学习浏览器的渲染原理 知识深度挖掘 帮助更好地理解前端性能优化 从而对实现效果进行针对性优化 如 回流和重绘 渲染机制 帮助更好地理解浏览

随机推荐

  • 你知道ai写作工具哪个好吗?教你用AI写年终总结

    又是一年的十二月到了 每年到这个时候 朋友圈都总会出现一首常驻歌曲 十二月的奇迹 身为打工人的大家应该都希望 在忙碌了一年的最后一个月被奇迹眷顾吧 不过俗话说得好 靠人不如靠己 与其把自己交给命运的奇迹 那不如自己也努力争取一下 在老板面前
  • 鸿蒙开发入门:快速修复命令行调试开发指导

    快速修复命令行调试开发指导 当前阶段 HarmonyOS为开发者提供了命令行的调试开发工具可供使用 比如 包名为com ohos quickfix的示例应用 版本号为1000000 该应用的当前版本运行中有某问题需要修复 此时 开发者可参考
  • 主动学习与弱监督学习

    人工智能数据的获取没有想象中的那么简单 虽然我们早已身处大数据的浪潮下 很多公司在获取数据的大浪中翻滚却始终没有找到一个合适的获取数据的渠道 很多情况下 获取高质量的人工智能数据需要消耗大量的人力 时间 金钱 但是对于未来世界 以 人机协同
  • Java处理SSH-免密登录

    前提 需要测试主机之间能够免密 配置ssh请自行百度 jar包 旧版 com jcraft jsch 仅支持老版的密钥格式 旧版本 RSA
  • go-zero开发入门-API网关开发示例

    开发一个 API 网关 代理 https blog csdn net Aquester article details 134856271 中的 RPC 服务 网关完整源代码 file main go package main import
  • 设计之妙,理解Android动画流程

    本文基于Android 12进行学习研究 参考 深入理解Android内核源码 思路学习总结 如有理解不对 望各位朋友指正 另外可能留存一些疑问 留后续再探索 输出只是为了分享和提升自己 动画初始化 按照窗口管理策略类中的定义 动画应该被分
  • 创建个人网站(一)从零开始配置环境,搭建项目

    目录 前言 配置环境 前端 后端 遇到的问题 1 安装了nvm和node vscode没反应 2 安装完脚手架之后vue指令不存在
  • docker配置连接harbor私有仓库

    一 前言 以下分为两种情况说明docker对harbor私有仓库的访问配置 一种是harbor使用自建证书配置https 一种是使用公有证书配置https 二 docker配置 harbor使用自建证书的情况 使用自建证书对harbor进行
  • 不看后悔系列!Android面试经验分享,附经典题库+答案解析

    前言 近期 许多同学向我咨询关于Android技术岗位的招聘事宜 希望能够在求职过程中更好地准备 以冲击大厂 拿到高薪 作为首批Android开发者 我十余年来一直深耕Android及移动互联网开发领域 拥有丰富的面试和实战经验 在此 我想
  • 活动报名|马普脑研究所主任Moritz Helmstaedter:Connectomics连接组学

    报告主题 Connectomics连接组学 报告日期 12月08日 周五 15 30 16 30 主题简介 大脑是由数百万至数十亿神经元组成的高度互联的网络 一个世纪以来 我们一直无法在突触分辨率上绘制这些连通性网络的图谱 只是最近 利用新
  • 协程与互斥锁: Kotlin Mutex的终极指南

    引言 今天我们将深入研究Kotlin中的Mutex 互斥锁 原理以及在实际开发中的使用技巧 Mutex是多线程编程中的关键工具 它可以有效地解决多线程访问共享资源时可能发生的竞态条件问题 Mutex的基本原理 Mutex是互斥锁的缩写 它是
  • USB-C口快充数据线背后的技术奥秘

    自从苹果iPhone 15也用上了USB C口后 市场上销售的快充数据线也日益增多 近日 有小伙伴向我反馈 使用苹果iPhone 15的USB C口原装数据线 无法给其他手机提供PD 120W快充 他们尝试更换其他数据线 有些可以激发120
  • mybatis plus 常见问题Invalid bound statement (not found)解决方法汇总

    我用的若依框架 将mybatis改为mybatis plus 在重启项目时报错Invalid bound statement not found 百思不得其解 百度回答各种mapper xml配置路径啥的 但是springboot项目需要配
  • 30天精通Nodejs--第十四天:MongoDB

    这里写目录标题 前言 什么是 MongoDB 安装 MongoDB 驱动 连接到 MongoDB 数据库 执行基本操作 插入文档 查询文档 更新文档 删除文档
  • Java的ThreadLocal

    ThreadLocal ThreadLocal 是 Java 中一个非常有用的类 它允许你创建线程局部变量 线程局部变量是指每个线程都有自己独立的变量副本 互不干扰 ThreadLocal 主要用于解决多线程环境下共享数据的线程安全性问题
  • 天猫交易rpa机器人轻松上架商品,助力提高电商效率!

    作为网店店主 你可能被困在电商运营各种繁琐的环节中已多时 当你每次上新都手忙脚乱 错漏百出 想节约人力成本而不知如何下手的时候 你可能需要了解一下RPA电商自动化解决方案中的商品自动上架机器人 只需一键点击 RPA机器人就能节约你80 的时
  • Android Tab吸顶 嵌套滚动通用实现方案✅

    很多应用的首页都会有一些嵌套滚动 Tab吸顶的布局 尤其是一些生鲜类应用 例如 朴朴超市 大润发优鲜 盒马等等 在 Android 里面 滚动吸顶方式通常可以通过 CoordinatorLayout AppBarLayout Collaps
  • 活动报名:首个「创造式任务」基准,Creative Agents创造式任务和具有想象力的智能体...

    报告主题 Creative Agents创造式任务和具有想象力的智能体 报告日期 12月18日 周一 11 00 12 00 主题简介 北京大学和清华大学等机构组成的团队提出了一类解决创造式任务的智能体 Creative Agents 并推
  • 给祖传系统做了点 GC调优,暂停时间降低了 90% | 京东云技术团队

    问题描述 公司某规则引擎系统 在每次发版启动会手动预热 预热完成当流量切进来之后会偶发的出现一次长达1 2秒的Young GC 流量并不大 并且LB下的每个节点都会出现该情况 在这次长暂停之后 每一次的年轻代GC暂停时间又都恢复在20 10
  • 浏览器的事件循环机制(Event loop)

    事件循环 浏览器的进程模型 何为进程 程序运行需要有它自己专属的内存空间 可以把这块内存空间简单的理解为进程 每个应用至少有一个进程 进程之间相互独立 即使要通信 也需要双方同意 何为线程 有了进程后 就可以运行程序的代码了 运行代码的 人