getboundingclientrect 是获取元素实时位置和尺寸最直接可靠的方式，天然适配滚动、缩放、css 变换等动态场景，返回值基于视口坐标，简化定位与可见性判断，配合 requestanimationframe 可高效实现平滑更新。
Element.getBoundingClientRect 是获取元素实时位置和尺寸最直接、最可靠的方式，它天然适配滚动、缩放、CSS 变换等动态场景，比手动递归 offsetParent 或监听 scroll 更简洁高效。
定位计算直接用视口坐标，避免滚动干扰
getBoundingClientRect 返回的 top、left 等值是相对于当前可视区域（viewport）的，这意味着你无需关心页面是否已滚动。例如实现“点击按钮后弹窗紧贴其下方”：
- 调用 button.getBoundingClientRect() 得到按钮在视口中的位置
- 弹窗的 top = buttonRect.bottom，left = buttonRect.left，完全避开 window.scrollY 计算
- 即使用户中途滚动，只要在显示前调用一次，位置就是准确的
判断元素是否可见时，用视口逻辑更自然
懒加载、动画触发动效等场景，核心是“用户此刻能不能看到它”。getBoundingClientRect 天然支持这种判断：
- 完全可见：rect.top >= 0 && rect.bottom = 0 && rect.right
- 部分可见（更常用）：rect.top 0 && rect.left 0
- 无需额外读取 scrollX / scrollY，也不依赖 document.body.scrollTop 等兼容性差的属性
配合 requestAnimationFrame 实现平滑定位更新
当元素位置可能因动画、布局变化而频繁变动时，不要在每帧都无脑调用 getBoundingClientRect——它会强制触发回流。正确做法是：
- 在需要响应式定位的逻辑中（如拖拽、跟随滚动），用 requestAnimationFrame 批量读取
- 只在真正要更新样式或位置前一刻调用，避免重复计算
- 对同一元素多次读取可缓存 rect 对象，除非 DOM 结构或样式已明确变更
获取文档级坐标只需加滚动偏移
虽然 getBoundingClientRect 默认返回视口坐标，但转成绝对文档坐标只需两行代码：
- const rect = el.getBoundingClientRect();
- const docTop = rect.top + window.scrollY;
- const docLeft = rect.left + window.scrollX;
- 这种方式比遍历 offsetParent 更稳定，尤其在 transform、fixed 定位或 shadow DOM 中表现一致
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
