Javascript element.getBoundingClientRect（）的替代项

我一直在使用getBoundingClientRect（）。一开始，我会因为这个而遇到性能问题。如果我从我的代码中删除这个方法，就会有更好的效果。javascript中getBoundingClientRect（）的任何替代方法

在这个示例中，我在button click中创建了2000个元素，并在另一个button click中更改了它们的位置。在这种情况下，我在使用getBoundingClientRect（）时会遇到性能问题

谁能帮我解决这个问题

document.getElementById（“click1”）.onclick=function（）{
对于（变量i=0；i<2000；i++）{
var ele=document.createElement（“DIV”）；
元件id=i+“”；
ele.className=“square”；
ele.setAttribute（“样式”，“位置：绝对；左侧：200px；顶部：100px”）；
document.getElementById（“标记”）.appendChild（ele）；
}
};
document.getElementById（“单击”）.onclick=function（）{
var markerCollection=document.getElementById（“标记”）；
可变宽度=20，
高度=20；
var半径=宽度*2；
var面积=2*3.14*半径；
var-totalMarker=0；
var numberOfMarker=数学圆（面积/宽度）；
totalMarker+=numberOfMarker；
变量百分比=数学圆（（高度/面积）*100）；
百分比=
markerCollection.children.length-1

.广场{
高度：20px；
宽度：20px；
背景色：#555；
边框：1px纯红；
}
创建元素
单击以更改
如果我没有误读您的代码，那么您所使用的
getBoundingClientRect（）
就是计算您已经知道的元素的宽度和高度（20x20px）

只需直接使用
width
和
height
变量，或者可能避免完全进行偏移计算，将
transform:translate（-50%-50%）
添加到元素的样式中。
谢谢您的回答。如果在每个div元素中加载不同长度的文本，我希望得到每个元素的中点。在这种情况下，我不知道每个元素的高度和宽度。这就是我使用GetBoundingClientracts的原因。这是我的实际需求。现在，我在每个div元素中添加了一些文本。在这种情况下，请查找下面的示例，使用
translate（-50%-50%）
浏览器将处理围绕其原点居中的元素。