01_原理-事件循环

news/2024/2/28 1:18:13

01_原理-事件循环


文章目录

  • 01_原理-事件循环
  • 一、浏览器的进程模型
    • ①:何为进程?
    • ②:何为线程?
    • ③:浏览器有哪些进程和线程?
  • 二、渲染主线程是如何工作的?
  • 三、若干解释
    • ①:何为异步?
    • ②:JS为何会阻碍渲染?
    • ③:任务有优先级吗?
    • ④:js优先级案例


一、浏览器的进程模型

①:何为进程?

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

②:何为线程?

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

运行代码的「人」称之为「线程」。

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

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

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

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

浏览器内部工作极其复杂。

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

在这里插入图片描述

1.可以在浏览器的任务管理器中查看当前的所有进程

在这里插入图片描述

其中,最主要的进程有:
1.浏览器进程
主要负责界面显示、用户交互、子进程管理等。刻览器进程内部会启动多个线程处理不同的任务。

2.网络进程
负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

3.渲染进程(本节课重点讲解的进程)
渲染进程启动后,会开启一个渲染主线程,主线程负责执行HTML、CSS、JS代码。
默认情况下,浏览器会为每个标签页开启一个新的渲染进程,以保证不同的标签页之间不相互影响。

将来该默认模式可能会有所改变,有兴趣的同学可参见chrome官方说明文档

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

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

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

思考题:为什么渲染进程不适用多个线程来处理这些事情?

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

比如:

  • 我正在执行一个JS函数,执行到一半的时候用户点击了按钮,我该立即去执行点击事件的处理函数吗?

  • 我正在执行一个JS函数,执行到一半的时候某个计时器到达了时间,我该立即去执行它的回调吗?

  • 浏览器进程通知我“用户点击了按钮”,与此同时,某个计时器也到达了时间,我应该处理哪一个呢?

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

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

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

三、若干解释

①:何为异步?

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

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

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

渲染主线程承担着极其重要的工作,无论如何都不能阻塞!

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

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

②:JS为何会阻碍渲染?

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>Coke</h1>
<button>按钮</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 = 'Coke很帅!'delay(3000)
};
</script>
</body>
</html>

在这里插入图片描述

③:任务有优先级吗?

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

但消息队列是有优先级的

根据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.受事件循环的影响,计时器的回调函数只能在主线程空闲时运行,因此又带来了偏差

④:js优先级案例

1.案例1

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

在这里插入图片描述

2.案例2

// 死循环指定的时间
function delay(duration){var start = Date.now();while(Date.now() - start < duration){  }
}setTimeout(function (){console.log(1)
},0)delay(1000)console.log(2)

在这里插入图片描述

3.案例3

setTimeout(function (){console.log(1)
},0)// 将改任务放到微队列中(微队列:优先级最高)
Promise.resolve().then(function(){console.log(3)
})console.log(2)

在这里插入图片描述


http://www.ppmy.cn/news/1251392.html

相关文章

PyTorch模型训练过程内存泄漏问题解决

近日&#xff0c;在模型训练过程中&#xff0c;发现过一段时间后进程会被kill&#xff0c;观察发现是由于内存泄漏问题造成的。通过逐行代码注释&#xff0c;发现问题在于数据集中的此行代码&#xff1a; info self.data_list[index]这里&#xff0c;self.data_list是dataset…

SS8841 打印机驱动芯片,替代DRV8841/A5977/L6472/MP6518

SS8841 为打印机和其它电机一体化应用提供 一种双通道集成电机驱动方案。SS8841 有两路 H 桥驱动&#xff0c;每个 H 桥可提供最大峰值电流 2.5A 和均 方根电流 1.75A(在 24V 和 Ta 25C 适当散热条 件下)&#xff0c;可驱动两个刷式直流电机&#xff0c;或者一个双极 步进电机…

【C++ Primer Plus学习记录】循环和文本输入

目录 1.使用原始的cin进行输入 2.使用cin.get(char)进行补救 3.使用哪一个cin.get() 4.文件尾条件 循环完后的一项最常见、最重要的任务&#xff1a;逐字符地读取来自文件或键盘的文本。 cin对象支持3种不同模式的单字符输入&#xff0c;其用户接口各不相同。下面介绍如何…

Java异常详解

Java 异常详解 Execption 和 Error 有什么区别&#xff1f; execption 是程序可自行处理的异常&#xff0c;可以通过 catch 进行捕获&#xff0c;可分为两类&#xff1a; Checked Exception &#xff08;受检查异常&#xff0c;必须处理&#xff09;和 Unchecked Exception &…

Vue组件的自定义事件$emit

组件上的自定义事件是和组件的自定义属性一样&#xff0c;都是模仿HTML正常的标签&#xff0c;由组件给出事件句柄&#xff0c;由使用组件的父组件提供事件处理函数。组件自定义事件真正触发的地方是在组件模板的标签上&#xff0c;组件自己不提供事件处理函数&#xff0c;将这…

揭秘周杰伦《最伟大的作品》MV,绝美UI配色方案竟然藏在这里

色彩在UI设计的基本框架中占据着举足轻重的位置。实际上&#xff0c;精心挑选和组合的色彩配色&#xff0c;往往就是UI设计成功的不二法门。在打造出一个实用的UI配色方案过程中&#xff0c;我们需要有坚实的色彩理论知识&#xff0c;同时还需要擅于从生活中观察和提取灵感。以…

数据被锁住了?如何应对.mkp病毒的攻击

导言&#xff1a; 在数字时代的舞台上&#xff0c;.mkp勒索病毒如幽灵般悄然崭露头角&#xff0c;威胁着无数个体和组织的数据安全。本文将深度挖掘.mkp勒索病毒的狡猾本质&#xff0c;并为你揭示应对感染的独特方法&#xff0c;以及如何巧妙规避这个数字威胁。 如果您在面对被…

go对rabbitmq基本操作

一、安装rabbitmq 1、直接使用docker拉取镜像 docker pull rabbitmq:3.82、启动容器 docker run \-e RABBITMQ_DEFAULT_USERadmin \-e RABBITMQ_DEFAULT_PASS123456 \-v mq-plugins:/plugins \--name rabbit01 \--hostname rabbit01 --restartalways \-p 15672:15672 \-p 5672:…

DES加密技术概述与应用

一、引言 随着信息技术的飞速发展&#xff0c;数据安全已成为越来越受到重视的问题。数据加密技术作为保障信息安全的核心技术之一&#xff0c;得到了广泛的研究和应用。DES&#xff08;Data Encryption Standard&#xff09;作为一种对称加密算法&#xff0c;凭借其高效、可靠…

一些好用的12款前端小插件

1. cropper.js Cropper.js 2.0 是一系列用于图像裁剪的 Web 组件。 官网地址&#xff1a;https://fengyuanchen.github.io/cropperjs/v2/zh/ 2. Vditor Vditor是一款浏览器端的 Markdown 编辑器&#xff0c;支持所见即所得、即时渲染&#xff08;类似 Typora&#xff09;和分…

使用 kubeadm 部署 Kubernetes 集群(一)linux环境准备

一、 初始化集群环境 准备三台 rocky8.8 操作系统的 linux 机器。每台机器配置&#xff1a;4VCPU/4G 内存/60G 硬盘 环境说明&#xff1a; IP 主机名 角色 内存 cpu 192.168.1.63 xuegod63 master 4G 4vCPU 192.168.1.64 xuegod64 worker 4G 4vCPU 192.168.1.62 xuegod62 work…

PHP在线日语学习平台

有需要请加文章底部Q哦 可远程调试 PHP在线日语学习平台 一 介绍 此日语学习平台基于原生PHP开发&#xff0c;数据库mysql。系统角色分为用户和管理员。(附带参考设计文档) 技术栈&#xff1a;phpmysqlphpstudyvscode 二 功能 学生 1 注册/登录/注销 2 个人中心 3 查看课程…

积分表二(高等数学同济版中所有的积分公式)

文章目录 含有 x − a x a \sqrt{\pm \frac{x-a}{xa}} xax−a​ ​ 或者 ( x − a ) ( b − x ) \sqrt{(x-a)(b-x)} (x−a)(b−x) ​ 的积分含有三角函数函数的积分含有反三角函数的积分 (其中 a > 0 a>0 a>0)含有指数函数的积分含有对数函数的积分含有双曲函数的…

STM32CubeIDE(CUBE-MX)----快速移植FreeRTOS实战

文章目录 前言一、Freertos可视化配置二、生成代码三、实验现象总结 前言 FreeRTOS&#xff08;Real-Time Operating System&#xff09;是一个开源的实时操作系统内核&#xff0c;专注于嵌入式系统。它提供了一套用于管理任务、调度器、内存管理等的实时操作系统功能&#xf…

【C++】string模拟

string讲解&#xff1a;【C】String类-CSDN博客 基本框架 #pragma once #include <iostream> using namespace std; ​ namespace wzf {class string{public:// 默认构造函数string(): _str(new char[1]), _size(0), _capacity(0){_str[0] \0; // 在没有内容时仍要有终…

LeetCode 1657. 确定两个字符串是否接近:思维题

【LetMeFly】1657.确定两个字符串是否接近&#xff1a;思维题 力扣题目链接&#xff1a;https://leetcode.cn/problems/determine-if-two-strings-are-close/ 如果可以使用以下操作从一个字符串得到另一个字符串&#xff0c;则认为两个字符串 接近 &#xff1a; 操作 1&…

osgFX扩展库-刻线特效、立方图镜面高光特效(2)

刻线特效 刻线特效(osgFX::Scribe)是一个双通道的特效&#xff0c;第一个通道以通常的方式渲染图形&#xff0c;第二个通道使用线框模式。用户设置好光照和材质之后&#xff0c;即可使用指定的颜色进行渲染。这个特效使用了PolygonOffset渲染属性类来避免多边形斑驳(Z-fighting…

vuepress-----3、导航栏

3、导航栏 # 页面目录结构约定 . ├── docs │ ├── .vuepress (可选的) │ │ ├── components (可选的) │ │ ├── theme (可选的) │ │ │ └── Layout.vue │ │ ├── public (可选的) │ │ ├── styles (可选的) │ │ │…

PostGIS学习教程八:空间关系

PostGIS学习教程八&#xff1a;空间关系 到目前为止&#xff0c;我们只使用了测量&#xff08;ST_Area、ST_Length&#xff09;、序列化&#xff08;ST_GeomFromText&#xff09;或者反序列化&#xff08;ST_AsGML&#xff09;几何图形&#xff08;geometry&#xff09;的空间…

SSL证书申请需要什么材料?SSL证书申请流程

SSL证书是由权威证书颁发机构验证身份后颁发&#xff0c;SSL证书申请过程中需要准备什么材料&#xff0c;才能顺利申请SSL证书呢&#xff1f; SSL证书申请需要准备如下材料&#xff0c;才能完成审核验证&#xff1a; 1、申请SSL证书的域名&#xff1a;提前准备已备案的域名&am…
最新文章