getBoundingClientRect ，IntersectionObserver，MutationObserver

最新推荐文章于 2025-05-20 11:57:34 发布
最新推荐文章于 2025-05-20 11:57:34 发布
阅读量111 收藏
点赞数 2
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_59070120/article/details/146403633
版权


getBoundingClientRect 和 IntersectionObserver为异步 是前端开发中用于处理元素位置和可见性的两个重要 API
getBoundingClientRect为同步，IntersectionObserver为异步，
兼容性方面getBoundingClientRect好于IntersectionObserver

不过IntersectionObserver从谷歌51版本开始就支持了
MutationObserver 可以用来监听 DOM 的任何变化，为异步操作

现代浏览器观察者 Observer API 指南
前端劝退师
10-24 1923
前言前段时间在研究前端异常监控/埋点平台的实现。在思考方案时，想到了浏览器自带的观察者以及页面生命周期API 。于是在翻查资料时意外发现，原来现代浏览器支持多达四种不同类...
js 懒加载 getBoundingClientRect
可遇，好孩子
12-13 1325
首先熟悉一下es5的一个APIRange.getBoundingClientRect()参考MDN兼容性： 返回一个 ClientRect 对象，该对象限定了选定的文档对象的内容，该方法返回了一个矩形，这个矩形包围了该文档对象中所有元素的边界矩形集合 比如一个html元素直接调用此API会得到这样的结果ClientRect{ bottom:3669, height: 523, left: 8,
getBoundingClientRect实现懒加载IntersectionObserver实现懒加载以及jquery和vue中使用第三方插件快速实现懒加载的方式
wanghe1111_的博客
03-25 1612
getBoundingClientRect实现懒加载IntersectionObserver实现懒加载以及jquery和vue中使用第三方插件快速实现懒加载的方式
Intersection Observer和getBoundingClinetRect的使用
xiangyizhixuexi的博客
03-20 504
IntersectionObserver接口(从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。 这两种方法都可以获取当前元素到视口边界的高度，但是他们两个的区别是Intersection Observer在性能上会更好，因为它不会引起回..
JS | 元素视图方法之getBoundingClientRect()方法详解，秒懂！
青春木鱼的博客
10-16 5878
在前端开发过程中，我们经常需要获取HTML元素的尺寸和位置信息。getBoundingClientRect()方法就是一个非常重要的工具，它可以帮助我们获取元素的大小及其相对于视口的位置。
js中getBoundingClientRect()方法详解
阿牛哥的博客
08-14 9408
js中getBoundingClientRect()方法详解
你真的会用getBoundingClientRect吗
魔侠的沙滩
03-04 1424
你真的会用getBoundingClientRect吗？ 左鹏飞 2017.09.20 本文介绍了什么是getBoundingClientRect；以及获取width,height的兼容性写法；最后介绍了两个使用场景：获取页面元素的位置和判断元素是否在可视区域。 1. 什么是getBoundingClientRect getBoundingClientRect用于获得页面中某个元素的左...
JavaScript高级前端API详解：MutationObserver, IntersectionObserver等
MutationObserver 是用于监听DOM结构变化的接口。当DOM树中的节点添加、删除或属性改变时，它会调用预设的回调函数，提供对这些变化的详细记录。这对于实现动态数据绑定或者实时响应DOM变化的场景非常有用。使用...
isElementInView:getBoundingClientRect（）的简单代码实现
05-10
此外，如果你需要监听元素是否进入或离开视口，可以结合`MutationObserver`或者`IntersectionObserver` API，它们提供了更高效且易于使用的解决方案，特别是在元素集合动态变化的情况下。 总之，`...
javascrip高级前端开发常用的几个API示例详解.docx
01-19
#### MutationObserver API 特点及应用 **MutationObserver** 是一种用于监听 DOM 结构变化的接口。它允许开发者监控文档中指定节点的变动情况，如子节点的增加或删除、属性或文本内容的改变等。 **特点：** 1. **...
VisibilityObserver:用于观察元素可见框的实验性API
04-15
将来，可以将该库重构为使用ResizeObserver ， MutationObserver ， IntersectionObserver和scroll事件，以提高性能。 安装 npm install --save visibilityobserver 用法 import VisibilityObserver from ...
震惊！！！一眼就能看懂的getBoundingClientRect用法！！！
热门推荐
m0_52009348的博客
08-20 1万+
主要介绍getBoundingClientRect的基本属性，以及具体的使用场景和一些需要注意的问题。 getBoundingClientRect Element.getBoundingClientRect() 含义： 方法返回元素的大小及其相对于视口的位置。 值： 返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合。 属性值： top: 元素上边距离页面上边的距离 left: 元素右边距离页面左边的距
前端曝光数据埋点——Intersection Observer+vue指令
weixin_34279061的博客
04-01 3891
一、背景介绍在电商产品中（可以打开你的淘宝、天猫、京东App），通过对商品的曝光进行数据埋点，就能反推出用户的行为和交互习惯，从而优化推荐和搜索算法以及交互，最终的目的当然是为了增加用户购买力。曝光：商品出现在用户眼前，也就是浏览器视窗，可谓之曝光最直白的两种方法1、监听滚动事件，通过[Element.getBoundingClientRect() - Web API 接口参考 | MDN]计...
【C# 自动化测试】Selenium显式等待机制详解
最新发布
长期关注AI发展路径、技术价值转化与系统性落地。
05-20 471
Selenium中的显式等待机制是自动化测试中处理页面元素加载延迟的重要工具。与强制等待（如Thread.Sleep()）相比，显式等待更加灵活高效，能够动态检测元素状态，避免不必要的等待时间。显式等待通过WebDriverWait类实现，允许设置超时时间和轮询间隔，并可以忽略常见的异常类型，如NoSuchElementException。
上集：一个前端的血泪复仇记 —— 静态部署的胜利
十步杀一人-千里不留行
05-17 1526
在《上集：一个前端的血泪复仇记 —— 静态部署的胜利》中，作者分享了在部署一个前后端分离的小项目时遇到的挑战和解决方案。项目后端使用Spring Boot，前端使用Next.js。在部署过程中，前端静态资源的处理成为主要难题。作者通过将Next.js生成的静态文件直接放入Spring Boot的static目录，简化了部署流程。然而，Spring Security的默认配置阻止了对这些静态资源的访问，导致403错误。通过调整SecurityConfig和WebConfig，作者成功解决了这一问题。此外，前端
怎样免费开发部署自己的网站？
编程代码，数据学习开发的日常总结。欢迎关注VX公众号：张飞的猪
05-18 529
免费开发网站的方法主要分为两种：对于零基础用户，推荐使用如WordPress.com、Weebly、Strikingly等建站平台，这些平台操作简单，适合快速搭建博客、作品展示等类型的网站。对于有一定技术基础的用户，可以选择自行开发网站，利用GitHub Pages、Replit等平台进行部署，这种方式提供了更高的自定义空间和学习机会。此外，如果用户拥有云服务器，还可以选择将网站部署在自己的服务器上，以获得更大的自由度。无论选择哪种方式，都有丰富的学习资源和工具可供利用，帮助用户实现网站开发的目标。
关于 Web 漏洞原理与利用：1. SQL 注入（SQLi）
Triste__chengxi的博客
05-18 1083
在绕过技巧作用原理典型例子备注编码绕过URL/Unicode/Hex编码%27 OR 1=1绕过简单字符串检测注释绕过利用 SQL 注释符截断后续语句截断后续合法语句大小写绕过混合大小写关键字绕过大小写敏感规则双写绕过重复字符、转义利用转义规则混淆检测宽字节绕过利用多字节编码字符重叠针对 GBK 等中文编码环境延时注入利用延时函数判断盲注无需报错，仅靠响应时间判断。
30、WebAssembly：古代魔法——React 19 性能优化
m0_60414444的博客
05-17 442
• 选择低运行时开销语言（如Rust/C++），编译后文件比Swift小4倍。二次优化二进制，实现指令级量子跃迁（Swift 9.1MB→4.0MB）• Chrome 91+支持SIMD指令集，兼容性覆盖90%现代浏览器。模式移除调试符号并优化指令流，文件体积缩减90%（84MB→7MB）• 结合Web Workers分配计算任务，CPU利用率提升70%• 与WebGL结合实现实时3D粒子特效（如魔杖光效轨迹）• 单指令处理4个32位浮点数，视频渲染速度提升4倍。实现SIMD向量化计算，性能提升300%
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大鸡腿最好吃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值