在 Web 开发过程中，经常需要比较两个元素的尺寸大小。比如，要判断一个图片是否填满了容器，需要确定容器的尺寸和图片的尺寸，并且比较它们的大小。以往，我们一般使用如下的方法进行比较：
const container = document.querySelector('.container');
const image = document.querySelector('.image');
if (container.clientWidth >= image.clientWidth && container.clientHeight >= image.clientHeight) {
// image has been fully contained
}上述代码中，我们使用了clientWidth和clientHeight属性，它们分别表示元素的可见宽度和高度。通过比较这两个属性的大小，就可以判断出图片是否被完全包含在容器中。
但是，这种方法的性能不是很高。在使用clientWidth和clientHeight属性时，浏览器需要先计算元素的布局信息，再返回它们的尺寸大小。如果页面中有大量的元素需要比较尺寸，这个过程会消耗大量的时间和资源。
为了解决这个问题，ECMAScript 2019 (ES10) 引入了两个新的 API：Element.prototype.getBoundingClientRect()和DOMRect.prototype.contains()。这两个 API 的性能比clientWidth和clientHeight更高，可以更快地比较两个元素的尺寸大小。
Element.prototype.getBoundingClientRect()
Element.prototype.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。它会计算出元素的四个位置信息，分别是 left、top、right 和 bottom，以及元素的宽度和高度。下面是一个示例：
<div class="container">
<img class="image" src="example.jpg" alt="example">
</div>-- -------------------- ---- -------
----- --------- - -------------------------------------
----- ----- - ---------------------------------
----- ------------- - ----------------------------------
----- --------- - ------------------------------
-- -------------------- -- --------------- -- -------------------- -- ----------------- -
-- ----- --- ---- ----- ---------
-在上面的示例中，我们首先获取了容器元素和图片元素的位置信息。然后，将它们的宽度和高度进行比较。这种方法不需要浏览器计算布局信息，可以更快地完成比较。
DOMRect.prototype.contains()
DOMRect.prototype.contains()方法用于判断一个 DOMRect 对象是否包含另一个 DOMRect 对象。它的参数是被包含的 DOMRect 对象。下面是一个示例：
-- -------------------- ---- -------
----- --------- - -------------------------------------
----- ----- - ---------------------------------
----- ------------- - ----------------------------------
----- --------- - ------------------------------
-- ----------------------------------- -
-- ----- --- ---- ----- ---------
-在上面的示例中，我们首先获取了容器元素和图片元素的位置信息。然后，通过containerRect.contains(imageRect)方法，判断图片元素是否被容器元素完全包含。这种方法不仅不需要浏览器计算布局信息，还可以更方便地进行尺寸比较。
总结
在前端开发中，常常需要进行元素尺寸比较。ES10 提供了Element.prototype.getBoundingClientRect()和DOMRect.prototype.contains()两个 API，可以更高效地进行尺寸比较。相对于clientWidth和clientHeight属性，它们在性能上有明显的优势。如果你需要进行尺寸比较，可以优先考虑使用这两个 API。
参考文献
- https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
- https://developer.mozilla.org/en-US/docs/Web/API/DOMRect/contains
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c318ed83d39b48817092c4