前端秘法进阶篇之事件循环

目录

一.浏览器的进程模型

1.进程

2.线程

二.浏览器的进程和线程

1. 浏览器进程

2. 网络进程

3. 渲染进程

三.渲染主线程

四.异步

五.优先级

1. 延时队列:

2.交互队列:

3.微队列:

六.JS 的事件循环

附加:JS 中的计时器能做到精确计时吗


一.浏览器的进程模型

1.进程

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

在这里我们把不同的颜色看做不同的程序运行时所需要的内存空间,每个应用至少有一个进程,进程之间相互独立,如果要联系,需要双方同意.

2.线程

有了进程之后就可以开始运行代码,那么谁来运行代码呢?其实就是线程

一个进程至少有一个线程(换句话说,就是给你分配内存空间,你就要去利用)

进程开启后会自动创建一个线程运行代码,该线程称之为主线程.

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

二.浏览器的进程和线程

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

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

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

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

其中,最主要的进程有:

1. 浏览器进程

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

2. 网络进程

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

3. 渲染进程

 渲染进程启动后,会开启一个**渲染主线程**,主线程负责执行 HTML、CSS、JS 代码。

 默认情况下,浏览器会为每个标签页开启一个新的渲染进程,以保证不同的标签页之间不相互影     响。

三.渲染主线程

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

- 解析 HTML/解析 CSS(解析成Dom树和Cssom树)
- 计算样式
- 布局
- 处理图层
- 每秒把页面画 60 次
- 执行全局 JS 代码
- 执行事件处理函数
- 执行计时器的回调函数
- ......

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

要处理这么多的任务那如何调度任务?

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

也就是我们常说的消息队列

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

2. 每一次循环会检查消息队列中是否有任务存在。如果有,就取出第一个任务执行,执行完一个

进入下一次循环;如果没有,则进入休眠状态

3. 其他所有线程(包括其他进程的线程)可以随时向消息队列添加任务。新任务会加到消息队列

末尾。在添加新任务时,如果主线程是休眠状态,则会将其唤醒以继续循环拿取任务

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

整个过程,被称之为事件循环event loop(消息循环 message loop)

四.异步

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

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

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

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

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

如何理解 JS 的异步?

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

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

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

得到执行。这样一来,一方面会导致繁忙的主线程白白的消耗时间,另一方面导致页面无法及

新,给用户造成卡死现象。

所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时,比如计时器、网络、事件

听,主线程将任务交给其他线程去处理,自身立即结束任务的执行,转而执行后续代码。当其他

程完成时,将事先传递的回调函数包装成任务,加入到消息队列的末尾排队,等待主线程调度行。

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

五.优先级

首先要清楚优先级是针对谁的,任务本身没有优先级,但消息队列有优先级
根据 W3C 的最新解释:

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

https://html.spec.whatwg.org/multipage/webappapis.html#p erform-a-microtask-checkpoint

随着浏览器的复杂度急剧提升,W3C 不再使用宏队列的说法

在目前 chrome 的实现中,至少包含了下面的队列:

1. 延时队列:

用于存放计时器到达后的回调任务,优先级「中」

2.交互队列:

用于存放用户操作后产生的事件处理任务,优先级「高」

3.微队列:

用户存放需要最快执行的任务,优先级「最高」

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

六.JS 的事件循环

事件循环又叫做消息循环,是浏览器渲染主线程的工作方式。在 Chrome 的源码中,它开启一个不

会结束的 for 循环,每次循环从消息队列中取出第一个任务执行,而其他线程只需要在合适的时间

将任务加入到队列末尾即可。

过去把消息队列简单分为宏队列和微队列,这种说法目前已无法满足复杂的浏览器环境,取而代之

的是一种更加灵活多变的处理方式。

 根据 W3C 官方的解释,每个任务有不同的类型,同类型的任务必须在同一个队列,不同的任务可

以属于不同的队列。不同任务队列有不同的优先级,在一次事件循环中,由浏览器自行决定取哪

个队列的任务。但浏览器必须有一个微队列,微队列的任务一定具有最高的优先级,必须优先调用

执行。

附加:JS 中的计时器能做到精确计时吗

不行,因为:

1. 计算机硬件没有原子钟,无法做到精确计时

2. 操作系统的计时函数本身就有少量偏差,由于 JS 的计时器最终调用的是操作系统的函数,也就携带了这些偏差

 3. 按照 W3C 的标准,浏览器实现计时器时,如果嵌套层级超过 5 层,则会带有 4 毫秒的最少时间,这样在计时时间少于 4 毫秒时又带来了偏差

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java 宠物在线商城系统Myeclipse开发mysql数据库web结构jsp编程servlet计算机网页项目

一、源码特点 java 宠物在线商城系统是一套完善的java web信息管理系统 servletdaobean mvc模式,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S 模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&…

open ai api 国内配置代理指南(网上最全)

1.配置须知 open ai 作为这一波AI浪潮的推动者,opne ai的gpt 系列产品在使用和体验上绝对是最强大的,现在对于开发者来说要在代码中访问open ai api是不可用的。所以本文就主要解决这个问题。我们要了解open ai 的网站gpt的访问和api的访问收费是分开来…

配置Juniper虚墙vSRX基于策略的IPsec VPN(WEB方式)

正文共:1444 字 18 图,预估阅读时间:2 分钟 关于IPsec VPN,我们已经有一个合集了(IPsec VPN)。之前接触比较多的是H3C的IPsec VPN,后来接触的厂家多了,才发现大家的模型或者叫法还是…

数据卷的常见命令,如何创建Nginx容器,修改nginx容器内的html目录下的index.html文件

数据卷 什么是数据卷 数据卷(volume)是一个虚拟目录,是容器内目录与宿主机**目录**之间映射的桥梁。 以Nginx为例,我们知道Nginx中有两个关键的目录: html:放置一些静态资源 conf:放置配置文…

文心一言4.0 VS ChatGPT4.0哪家强?!每月60块的文心一言4.0值得开吗?

大家好,我是木易,一个持续关注AI领域的互联网技术产品经理,国内Top2本科,美国Top10 CS研究生,MBA。我坚信AI是普通人变强的“外挂”,所以创建了“AI信息Gap”这个公众号,专注于分享AI全维度知识…

AI短视频一键换脸小程序源码/带流量主

微信云开发AI一键视频换脸小程序源码是由极客二改后发布的,小程序增加了广告控制,插屏广告,激励广告和原生广告,由于采用了微信云开发没有后台,所以不需要域名和服务器也可以正常搭建使用,所有的配置都可以…

C++,stl,函数对象,谓词,内建函数对象

目录 1.函数对象使用 2.谓词 1.一元谓词 2.二元谓词 3.内建函数对象 1.算术仿函数 2.关系仿函数 3.逻辑仿函数 1.函数对象使用 #include<bits/stdc.h> using namespace std;class add { public:int operator()(int v1,int v2){return v1 v2;} };class print { p…

从C向C++8——多态

一.多态基础 面向对象程序设计语言有封装、继承和多态三种机制&#xff0c;这三种机制能够有效提高程序的可读性、可扩充性和可重用性。 “多态&#xff08;polymorphism&#xff09;”指的是同一名字的事物可以完成不同的功能。多态可以分为编译时的多态和运行时的多态。前者主…

Unity(单元测试)在STM32上的移植与应用

概述 Unity Test是一个为C构建的单元测试框架。本文基于STM32F407为基础&#xff0c;完全使用STM32CubeIDE进行开发&#xff0c;移植和简单使用Unity。 单片机型号&#xff1a;STM32F407VET6 软件&#xff1a;STM32CubeIDE Version: 1.14.1 Unity Version&#xff1a;2.…

儿童护眼台灯哪个值得推荐?推荐专业的儿童护眼台灯

现在的孩子很多都存在视力问题&#xff0c;而且年龄也越来越早&#xff0c;不少还为上学的孩子都早已戴上小眼镜。虽说这可能存在家族近视遗传的可能性&#xff0c;不过更多的还是后天导致的。长时间玩耍电子产品、缺乏运动、不良用眼习惯、不合适的光线等等都是导致孩子近视的…

【JavaScript 教程】

JavaScript 教程 JavaScript 在线实例为什么学习 JavaScript? JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都可以使用 JavaScript。 JavaScript 非常容易学。 JavaScript 在线实例 <!DOCTYPE html> <html> <head> <meta charset"utf-8&q…

23款奔驰S400商务版没有后排电动座椅那改装一套跟选装有区别吗

改装的后排电动座椅通常提供以下功能&#xff1a; 电动调节&#xff1a;座椅可以通过按钮或控制面板进行前后调节&#xff0c;以适应乘客的腿部空间需求。 靠背角度调节&#xff1a;乘客可以通过电动调节功能来调整座椅的靠背角度&#xff0c;以获得更舒适的坐姿。 座椅倾斜调…

一文讲透Python函数中的形式参数和实际参数

函数参数包括形式参数和实际参数&#xff0c;简称形参和实参。其中形式参数即是在定义函数时函数后面括号中的参数列表&#xff08;parameterlist&#xff09;&#xff0c;比如上一个帖子的示例中的width, length&#xff1b;实际参数则是调用函数时函数后面括号中的参数值&…

【HTML】交友软件上照片的遮罩是如何做的

笑谈 我不知道大家有没有在夜深人静的时候感受到孤苦难耐&#xff0c;&#x1f436;。于是就去下了一些交友软件来排遣寂寞。可惜的是&#xff0c;有些交友软件真不够意思&#xff0c;连一些漂亮小姐姐的图片都要进行遮罩&#xff0c;完全不考虑兄弟们的感受,&#x1f620;。所…

Go教程-什么是编程?

什么是编程&#xff0c;这是个有趣的话题。 编程是什么 编程&#xff0c;字面意思即编写程序&#xff0c;即通过既定的关键字&#xff0c;来描述你的想法&#xff0c;并让计算机的各个部件按照你的想法来做事。 这里计算机的各个部件通常来说&#xff0c;指的是CPU和IO设备。…

解决Windows更新后无法启动的十种办法,总有一种适合你

你可能已经更新了操作系统以修复错误或使用最新功能。但是,如果Windows在更新后无法启动呢? 如果你面临这样的问题,主要是由于安装文件中的错误或你的系统与最新更新不兼容。此外,损坏的MBR或驱动程序也会阻止电脑启动。 不管是什么原因,本文将用十种简单的技术来指导你…

算法沉淀——队列+宽度优先搜索(BFS)(leetcode真题剖析)

算法沉淀——队列宽度优先搜索&#xff08;BFS&#xff09; 01.N 叉树的层序遍历02.二叉树的锯齿形层序遍历03.二叉树最大宽度04.在每个树行中找最大值 队列 宽度优先搜索算法&#xff08;Queue BFS&#xff09;是一种常用于图的遍历的算法&#xff0c;特别适用于求解最短路径…

Ps:统计

Ps菜单&#xff1a;文件/脚本/统计 Scripts/Statistics 统计 Statistics脚本命令提供了一种高效的方法来处理和分析大量图像&#xff0c;使用户能够自动执行复杂的图像分析任务&#xff0c;并在多个图像间应用统计学方法。这个功能极大地扩展了 Photoshop 在科学研究、图像编辑…

【单总线与DS18B20总结和代码实现】

单总线介绍与总结 单总线介绍单总线时序图DS18B20的操作流程代码 读温度代码思路代码实现 单总线介绍 单总线应用案例&#xff1a;Ds18B20、温湿度传感器用到的就是这个&#xff0c;这里Ds18B20从当的角色是从机部分&#xff0c;而开发板充当的部分人是主机部分。 Ds18B20内部结…

docker (三)-开箱即用常用命令

一 docker架构 拉取镜像仓库中的镜像到本地&#xff0c;镜像运行产生一个容器 registry 镜像仓库 registry可以理解为镜像仓库&#xff0c;用于保存docker image。 Docker Hub 是docker官方的镜像仓库&#xff0c;docker命令默认从docker hub中拉取镜像。我们也可以搭建自己…