Event loop(Message loop)

事件循环(消息循环)

浏览器的进程模型

进程

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

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

线程

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

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

浏览器的进程和线程

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

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


其中,最主要的进程有:

  • 浏览器进程:主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务
  • 网络进程:负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务
  • 渲染进程:渲染进程启动后,会开启一个渲染主线程,主线程负责执行 HTML、CSS、JS 代码。

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

渲染主线程

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

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

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

要处理这么多的任务,主线程如何调度任务?

异步

Js为什么会阻碍渲染?

因为都在一个渲染主线程中

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

任务是否有优先级

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


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

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

例如:

//立即把一个函数添加到微队列

Promise.resolve().then(函数)

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

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

相关文章

【Linux学习】Linux权限(二)

文章目录 🚀Linux权限管理🚀修改文件的所有者🚀修改文件或目录的所属组🚀同时修改为念的拥有者与所属组🚀文件类型🚀file指令🚀目录权限🚀umask指令🚀粘滞位 &#x1f68…

网盘——私聊

在私聊这个功能实现中,具体步骤如下: 1、实现步骤: A、客户端A发送私聊信息请求(发送的信息包括双方的用户名,聊天信息) B、如果双方在线则直接转发给B,不在线则回复私聊失败,对方…

Sping源码(七)—ConfigurationClassPostProcessor创建流程

序言 前两篇文章介绍了invokeBeanFactoryPostProcessors的执行流程,和自定义实现BeanDefinitionRegistryPostProcessor类的方式方法。 这篇文章会主要介绍Spring启动加载xml时,ConfigurationClassPostProcessor类是如何加载到Spring中,并且…

【数学建模】最优旅游城市的选择问题:层次分析模型(含MATLAB代码)

层次分析法(The analytic hierarachy process,简称AHP)是一种常用的决策分析方法,其基本思路是将复杂问题分解为多个组成部分,然后对这些部分进行逐一评估和比较,最后得出最优解决方案。(例如&a…

JVM知识点总结二

参考文章:【Java面试题汇总】JVM篇(2023版)_jvm面试题2023-CSDN博客 1、说说你了解的JVM内存模型: JVM由三部分组成:类加载子系统、运行时数据区、执行引擎 JVM内存模型: 内存模型里的运行时数据区&#…

ruby 配置代理 ip(核心逻辑)

在 Ruby 中配置代理 IP,可以通过设置 Net::HTTP 类的 Proxy 属性来实现。以下是一个示例: require net/http// 获取代理Ip:https://www.kuaidaili.com/?refrg3jlsko0ymg proxy_address 代理IP:端口 uri URI(http://www.example.com)Net:…

机器学习 | 使用Scikit-Learn实现分层抽样

在本文中,我们将学习如何使用Scikit-Learn实现分层抽样。 什么是分层抽样? 分层抽样是一种抽样方法,首先将总体的单位按某种特征分为若干次级总体(层),然后再从每一层内进行单纯随机抽样,组成…

Django项目使用uwsgi+nginx部署上线

Django项目使用uwsginginx部署上线 前言settings 配置安装uwsgi 和配置uwsgi推荐配置文件启用wsgi不使用nginx的配置(不推荐)使用nginx的配置 安装 nginx和配置niginx 配置 运行参考资料 前言 代码已经开发完成,正式部署上线 settings 配置…

Redmi Turbo 3新品发布,天星金融(原小米金融)优惠加持护航新机体验

Redmi新十年使命不变,挑战不断升级。Redmi Turbo 3,作为Turbo系列的开篇之作,将自身定位为新生代性能旗舰,决心重塑中端性能新格局。据悉,Redmi Turbo 3于4月10日已正式发布。预售期间更是连续数日,蝉联小米…

SSL证书在HTTP与HTTPS中的角色差异是什么?

在互联网的广泛应用背景下,随着网络攻击和数据泄露事件频发,保障用户的数据安全已成为至关重要的议题。传统的HTTP协议在传输数据时不进行加密处理,导致数据在传输过程中暴露于潜在的窃听和篡改风险中,安全性薄弱。而通过引入SSL/…

解决Keil V5.38 和 ST-Link V3 Debug不能运行问题

目录 概述 1 问题描述 1.1 情况一 1.2 情况二 1.3 情况三 2 解决方法 2.1 认识Keil Mico Lib 2.2 使能Keil Mico Lib 3 验证 3.1 进入C程序Main验证 3.2 断点验证 3.3 上电重启验证 4 结论 笔者使用的验证代码下载地址: stm32-freeRTOS-queue资源-CSD…

微信小程序日期增加时间完成订单失效倒计时(有效果图)

效果图 .wxml <view class"TimeSeond">{{second}}</view>.js Page({data: {tiem_one:,second:,//倒计时deadline:,},onLoad(){this.countdown();},countdown(){let timestamp Date.parse(new Date()) / 1000;//当前时间戳let time this.addtime(2024…

k8s 部署 kube-prometheus监控

一、Prometheus监控部署 1、下载部署文件 # 使用此链接下载后解压即可 wget https://github.com/prometheus-operator/kube-prometheus/archive/refs/heads/release-0.13.zip2、根据k8s集群版本获取不同的kube-prometheus版本部署 https://github.com/prometheus-operator/k…

VSCode断点调试(ROS)

0、安装ros插件 在扩展商店中安装ROS插件&#xff08;Microsoft&#xff09; 1、修改CMakeList.txt # set(CMAKE_BUILD_TYPE "Release") // 注释Release模式 set(CMAKE_BUILD_TYPE "Debug") // 设置为Debug模式 # set(CMAKE_CXX_FLAGS_RELEASE &…

递归、搜索与回溯算法:回溯,决策树

回溯算法是⼀种经典的递归算法&#xff0c;通常⽤于解决组合问题、排列问题和搜索问题等。 回溯算法的基本思想&#xff1a;从⼀个初始状态开始&#xff0c;按照⼀定的规则向前搜索&#xff0c;当搜索到某个状态⽆法前进时&#xff0c;回退到前⼀个状态&#xff0c;再按照其他…

Hadoop3:大数据的基本介绍

一、什么是大数据 1、大数据的4v特点 Volume&#xff08;大量&#xff09; Velocity&#xff08;高速&#xff09; Variety&#xff08;多样&#xff09; Value&#xff08;低价值密度&#xff09; 2、大数据部门间的工作岗位 第三部分&#xff0c;其实就是JavaWeb 二、…

用 element ui 实现季度选择器

由于在数据项目中经常以各种时间条件查询数据&#xff0c;所以时间选择器&#xff08;DatePicker&#xff09;组件是很常用的组件。但是在我使用的 Element UI 中&#xff0c;缺少了季度选择器的功能。 简易实现 一开始我根据时间范围使用 select 去遍历,如 2024-Q1、2023-Q4…

cdp集群Hbase组件HRegionServer服务停止原因以及排查

前言&#xff1a;重启集群后某一节点HRegionServer服务停止&#xff0c;重启前所有服务均正常 去查看日志&#xff1a; 日志报错 ERROR HRegionServer Master rejected startup because clock is out of sync org.apache.hadoop.hbase.ClockOutOfSyncException: org.apache.h…

Spark-Scala语言实战(17)

我带着大家一起来到Linux集群环境下&#xff0c;学习我们的spark。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。 Spark-Scala语言实战&#xff08;16&#x…

linux 基础命令docker及防火墙iptables详解

应用场景&#xff1a; web应用自动打包和发布 自动化测试&#xff0c;持续集成、发布 在服务环境中部署后台应用 搭建paaS平台 安装应用 apt install docker.io#kali中 配置docker源&#xff0c;文件位置/etc/docker/daemon.json { "registry-mirrors": [ "h…