什么是 ClientRects？
ClientRects 是浏览器中与元素布局和尺寸相关的一个重要概念，它通常通过 JavaScript 接口 getClientRects() 获取。简单来说，它可以让开发者获得网页元素在屏幕或视口中的位置、大小和边界信息，帮助实现精确的界面控制、动态布局、选区计算等功能。
举个直观例子：当你选中网页上的一段文字，浏览器需要知道这段文字在屏幕上的每一行具体位置，这就离不开 ClientRects。
ClientRects 的工作原理
调用某个元素的 getClientRects() 方法，会返回一个 DOMRectList 对象，其中每个 DOMRect 表示元素或选中区域在屏幕上的一个矩形区域。
每个矩形包含以下信息：
-
x / y：矩形左上角相对于视口的坐标
-
width / height：矩形的宽度和高度
-
top / right / bottom / left：矩形四边在视口中的位置
当元素跨行、跨容器或者包含内联文本时，getClientRects() 会返回多个矩形，精确表示每一段可视区域。
ClientRects 的常见用途
ClientRects 在网页开发和交互设计中有很多应用场景，例如：
-
文本高亮与选区：计算文字每行的坐标，生成精确的高亮效果。
-
拖拽和碰撞检测：确定元素位置与尺寸，实现可视化拖拽或判断元素是否重叠。
-
动态布局与自适应 UI：在布局变化时获取元素尺寸，调整其他组件的位置。
-
辅助功能与可访问性：帮助屏幕阅读器或可视化工具定位元素位置。
ClientRects 的优势与限制
优势
-
提供精确的元素位置信息，包括跨行或跨容器的复杂场景。
-
与原生 DOM 和 CSS 结合，支持动态布局计算。
-
可用于实现高级交互效果，如文字选区高亮、拖拽、提示气泡定位等。
限制
-
返回的是相对于视口的位置，页面滚动时坐标会变化，需要注意偏移量。
-
计算复杂元素或大量 DOM 时可能有性能开销。
-
仅反映布局，不包含样式或变换后的视觉效果，需要结合
getBoundingClientRect()或 CSS 信息使用。
ClientRects 与隐私
ClientRects 本身是一个布局和尺寸 API，但在浏览器指纹识别中也可能被滥用。有些追踪器会通过测量元素渲染后的精确矩形位置来生成“渲染指纹”，例如获取字体渲染差异、文字换行偏移等，从而识别用户设备。
为了减少被跟踪的风险，指纹浏览器 通常会对 ClientRects 返回值进行干预或随机化，例如：
-
伪装：返回统一的矩形坐标，使不同设备的 ClientRects 数据看起来一致。
-
随机化：在返回值中加入微小扰动，使每次检测结果不同，阻断长期追踪。
-
阻断访问：限制网页脚本直接访问 ClientRects API，或在首次访问时提示用户授权。
使用这些方法，用户可以在保持正常网页交互功能的前提下，有效降低通过 ClientRects 被识别的风险。
总结
ClientRects 是前端开发中获取元素精确位置和尺寸的重要工具。它可以支持文字选区、高亮、拖拽、动态布局等多种功能，同时在隐私保护中也需要注意潜在的指纹泄露风险。理解 ClientRects 的工作原理和应用场景，有助于开发者更高效地设计交互和布局，同时兼顾用户隐私。
ClientRects 的常见问题
ClientRects 和 getBoundingClientRect 有什么区别？
-
getClientRects()返回多个矩形，表示元素的每一块可视区域。 -
getBoundingClientRect()返回单个矩形，表示元素整体包围盒。
滚动页面会影响 ClientRects 坐标吗？
是的，ClientRects 坐标是相对于视口的，页面滚动后坐标会随之改变。
如何避免 ClientRects 被用于指纹识别？
可以使用指纹浏览器或隐私插件，部分工具会对 ClientRects 返回值进行干预或随机化，降低设备识别风险。