どちらも Element のメソッドで要素の場所やサイズを取得するものです
よく読めば違いは名前でわかるようになってます
getClientRects は複数形なので複数の DOMRect を取得します
それに対して getBoundingClientRect は単数なのでひとつです
Bounding という言葉からわかるように 全部の DOMRect を覆うひとつの DOMRect になります
基本は 1 つなのですが 折り返すケースでは複数の DOMRect に分かれます
例えばこういう HTML があって
<div>
<span>AAA AAA AAA AAA AAA</span>
<span>BBB BBB BBB BBB BBB</span>
</div>
見た目がこうなったとします
AAA AAA AAA AAA AAA BBB BBB BBB
BBB BBB
このとき A の span では
[getClientRects]
DOMRectList {
"0": DOMRect {
"x": 8,
"y": 8,
"width": 184.40625,
"height": 24,
"top": 8,
"right": 192.40625,
"bottom": 32,
"left": 8
}
}
[getBoundingClientRect]
DOMRect {
"x": 8,
"y": 8,
"width": 184.40625,
"height": 24,
"top": 8,
"right": 192.40625,
"bottom": 32,
"left": 8
}
となり getClientRects の結果は 1 つだけです
getBoundingClientRect で得られるものと同じです
それに対して B の span では
[getClientRects]
DOMRectList {
"0": DOMRect {
"x": 197.84375,
"y": 8,
"width": 107.765625,
"height": 24,
"top": 8,
"right": 305.609375,
"bottom": 32,
"left": 197.84375
},
"1": DOMRect {
"x": 8,
"y": 32,
"width": 70.03125,
"height": 24,
"top": 32,
"right": 78.03125,
"bottom": 56,
"left": 8
}
}
[getBoundingClientRect]
DOMRect {
"x": 8,
"y": 8,
"width": 297.609375,
"height": 48,
"top": 8,
"right": 305.609375,
"bottom": 56,
"left": 8
}
右上と左下の 2 つに分かれます
getBoundingClientRect ではこの 2 つを含む領域なので 大きめの矩形です
ほぼ親の div と一致します
横の僅かな隙間などがあるので完全には一致しません
基本は getBoundingClientRect で良いと思います