js ResizeObserver API

一、ResizeObserver 是什么

ResizeObserver 是一个浏览器提供的 JavaScript API,用于监测一个元素的大小变化。它可以帮助开发者在元素的宽度或高度发生改变时执行某些操作,比如调整布局、重新渲染内容等。

二、Resize Observer和监听resize的区别及其优缺点

在 JavaScript 中,Resize Observer 和监听窗口的 resize 事件是用来处理元素大小变化的两种不同的方法。下面是它们的区别以及各自的优缺点:

Resize Observer
优点

  • 高效:只会在目标元素大小变化时触发回调,而不是每次窗口大小变化时都触发。
  • 精确:可以监测多个元素的变化,而不必依赖于全局的窗口大小事件。
  • 异步处理:可以在变更后立即获取新的尺寸,不会阻塞浏览器的渲染流程。

缺点

  • 浏览器支持:虽然现代浏览器都支持,但老旧的浏览器可能不兼容。
  • 复杂性:对于简单的场景使用起来可能显得有些复杂。

resize
优点

  • 简单易用:代码实现简单,适合基础的窗口变化监听。
  • 广泛兼容:支持所有主流浏览器,因为这是一个较早的 API。

缺点

  • 性能问题:当窗口调整大小时,可能会频繁触发,因为即使没有实际内容变化,事件也会被触发。
  • 不够精确:无法监测单个元素的大小变化,只能检测窗口的大小。
  • 处理延迟:可能需要使用节流(throttling)或防抖(debouncing)技术来提高性能,增加了实现复杂性。

总结
使用场景:如果你需要监测特定元素的大小变化,Resize Observer 是更好的选择。如果只是需要监测窗口大小变化,使用 resize 事件更为简单。
选择依据:基于项目需求和浏览器兼容性来决定使用哪种方法。对于性能要求高和需要精确控制的情况,Resize Observer 更合适;而对于基础的窗口调整监控,监听 resize 事件可能就足够了。
希望这些信息能帮助你理解 Resize Observer 和窗口 resize 事件的区别及各自的优缺点!

三、使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#elem {width: 400px;height: 400px;background-color: green;resize: both;overflow: auto;}</style>
</head>
<body><div id="elem">resize auto</div><button onClick="handleToggleClick()">监听/取消监听</button><script>/*** @type { ResizeObserver | null }*/let observer = null;let isToggle = false;let elemDom = document.getElementById('elem');function observeElem() {observer = new ResizeObserver((entries) => {for (let entry of entries) {console.log(entry);}})if (observer !== null) observer.observe(elemDom); // 监听}function rmObserve() {if (observer) {observer.unobserve(elemDom); // 取消监听}}function handleToggleClick() {isToggle = !isToggle;if (isToggle) {return observeElem();}return rmObserve();}</script>
</body>
</html>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

《探索Zynq MPSoC》学习笔记(三)

引言&#xff1a;本文简要介绍FPGA器件技术发展以及当今FPGA器件的体系架构和特性。 第二章 FPGA、Zynq和Zynq MPSoC&#xff08;2&#xff09; 在本章涵盖的三种器件类型中&#xff0c;FPGA是建立时间最长的&#xff0c;也是Zynq和Zynq MPSoC器件PL元件的基础。因此&#xf…

支持用户注册和登录、发布动态、点赞、评论、私信等功能的社交媒体平台创建!!!

需要整体源代码的可以在我的代码仓下载https://gitcode.com/speaking_me/social-media-platformTest.git 社交媒体平台 描述&#xff1a;社交媒体平台需要支持用户注册、发布动态、点赞、评论、私信等功能。 技术栈&#xff1a; 前端&#xff1a;React, Angular, Vue.js后端…

跨平台WPF框架Avalonia教程 十五

ListBox 列表框 列表框从元素源集合中显示多行元素&#xff0c;并允许选择单个或多个。 列表中的元素可以组合、绑定和模板化。 列表的高度会扩展以适应所有元素&#xff0c;除非特别设置&#xff08;使用高度属性&#xff09;&#xff0c;或由容器控件设置&#xff0c;例如…

STL之mapset续|红黑树篇

STL之map&set续|红黑树篇 红黑树红黑树的规则红黑树的模拟实现 map&set的模拟实现封装map/set关于红黑树的复用红黑树模板参数set的const迭代器问题 红黑树 红黑树也是一种搜索二叉树&#xff0c;它通过颜色和规则控制树上没有一条路径会比其他路径长两倍&#xff0c;…

三、计算机视觉_03LeNet5及手势识别案例

1 LeNet-5基本介绍 LeNet-5是一种经典的卷积神经网络&#xff08;CNN&#xff09;架构&#xff0c;由Yann LeCun在1998年提出&#xff0c;用于手写数字识别&#xff0c;LeNet-5是卷积神经网络的开创性工作之一&#xff0c;它引入了卷积层、池化层和全连接层的组合&#xff0c;为…

【论文模型复现】深度学习、地质流体识别、交叉学科融合?什么情况,让我们来看看

文献&#xff1a;蓝茜茜,张逸伦,康志宏.基于深度学习的复杂储层流体性质测井识别——以车排子油田某井区为例[J].科学技术与工程,2020,20(29):11923-11930. 本文目录 一、前言二、文献阅读-基于深度学习的复杂储层流体性质测井识别2.1 摘要2.2 当前研究不足2.3 本文创新2.4 论文…

Uni-APP+Vue3+鸿蒙 开发菜鸟流程

参考文档 文档中心 运行和发行 | uni-app官网 AppGallery Connect DCloud开发者中心 环境要求 Vue3jdk 17 Java Downloads | Oracle 中国 【鸿蒙开发工具内置jdk17&#xff0c;本地不使用17会报jdk版本不一致问题】 开发工具 HBuilderDevEco Studio【目前只下载这一个就…

Unity-Editor扩展Odin + 自定义EditorWindow记录

没有上下文&#xff0c;可能你不知道这是什么&#xff08;关于Odin Inspector) 在写一个 Odin 插件的完整文章&#xff0c;卡了三天&#xff0c;之后会放出 使用Unity的人之中 1/10 可能会使用Editor扩展&#xff0c;而这之中的又1/10的 人可能会用Odin这个Editor的附加扩展 -…

FIFO系列 - FIFO使用中需要注意的若干问题

FIFO使用中需要注意的若干问题 文章目录 FIFO使用中需要注意的若干问题前言场景1:包数据FIFO设计之冗余法场景2、FIFO数据传输之流控总结前言 场景1:包数据FIFO设计之冗余法 场景:类似图像、文字等码流数据是不需要重复被访问的,因此使用FIFO进行缓存(如果需要被存储,一…

计算机毕业设计 | springboot+vue大学城水电管理系统 校园学校物业水电管理(附源码+文档)

1&#xff0c;绪论 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理大学城水电管理系统的相关信息成…

5-对象的访问权限

对象的访问权限知识点 对象的分类 在数据库中&#xff0c;数据库的表、索引、视图、缺省值、规则、触发器等等、都可以被称为数据库对象&#xff0c;其中对象主要分为两类 1、模式(schema)对象&#xff1a;模式对象可以理解为一个存储目录、包含视图、索引、数据类型、函数和…

药方新解:Spring Boot中药实验管理系统设计

3系统分析 3.1可行性分析 通过对本中药实验管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本中药实验管理系统采用SSM框架&#xff0c;JAVA作为开发语…

动态规划-完全背包问题——279.完全平方数

1.题目解析 题目来源 279.完全平方数——力扣 测试用例 2.算法原理 1.状态表示 完全背包问题通常都是使用一个二维数组来表示其状态&#xff0c;这里是 dp[i][j]&#xff1a;在[1,i]区间选择平方数&#xff0c;当此时已选择平方数的总和完全等于j时所选择的最小平方数个数 …

二叉树的层序遍历

一、题目 给定一个二叉树&#xff0c;返回该二叉树层序遍历的结果&#xff0c;&#xff08;从左到右&#xff0c;一层一层地遍历&#xff09; 例如&#xff1a; 给定的二叉树是{3,9,20,null,null,15,7}, 该二叉树层序遍历的结果是 [[3],[9,20],[15,7]] 二、解决方案 2.0 树…

模型训练过程的显存占用实测

依赖项说明 pip install nvitop pip install timm pip install peft后续的显存占用数据截图&#xff0c;均基于nvitop命令实现 1、模型显存占用说明 1.1 理论占用值 在 一文讲明白大模型显存占用&#xff08;只考虑单卡&#xff09;与大模型显存占用分析都对模型训练过程中…

后端分层解耦

引入 在上篇所举的例子中&#xff0c;我们将所有的代码均放在HelloControl方法之中&#xff0c;这样会导致代码的复用性、可读性较差&#xff0c;难以维护。因此我们需 三层架构 在之前的代码中&#xff0c;代码大体可以分为三部分&#xff1a;数据访问、数据逻辑处理、响应数…

AIGC 入门全攻略:开启智能创作新时代

一、AIGC 初印象 AIGC&#xff0c;即人工智能生成内容&#xff0c;是继专业生产内容&#xff08;PGC&#xff09;、用户生产内容&#xff08;UGC&#xff09;之后的新型内容创作方式。它涵盖了文本生成、图像与视频创作、音频生成等多个领域&#xff0c;正在以惊人的速度改变着…

约克VRF地暖中央空调,让你舒适过冬

想要冬季过得舒服&#xff0c;采暖必须要到位&#xff01;对于没有集中供暖的南方地区来说&#xff0c;冬季室内阴冷刺骨。 选购地暖中央空调时&#xff0c;强效制热的能力必不可少&#xff0c;让我们可以享受温暖的室内温度&#xff0c;有效减少室内忽冷忽热的温度变化。 约克…

基于Java Springboot宠物领养救助平台

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…

使用原生 OpenTelemetry 解锁各种可能性:优先考虑可靠性,而不是专有限制

作者&#xff1a;来自 Elastic Bahubali Shetti•Miguel Luna Elastic 现在支持使用 OTel Operator 在 Kubernetes 上部署和管理 Elastic Distributions of OpenTelemetry (EDOT)。SRE 现在可以访问开箱即用的配置和仪表板&#xff0c;这些配置和仪表板旨在通过 Elastic Observ…