Question

我一直在我的应用程序中使用getBoundingClientRect（）来获取用户拖动项目时元素的尺寸。我一直在使用它并且它运作良好;但是，在鼠标移动过程中执行此计算时，我开始遇到重大性能问题。节点移动得越大，情况就越糟糕。我已经在Chrome中使用了分析工具，并注意到这个函数被包裹在用户拖动时被触发的鼠标移动事件中，需要很长时间（每次调用31.4ms）每次鼠标移动时都会调用。）在研究问题时，我遇到了其他使用它的人，并注意到了性能问题（http://dcousineau.com/blog/2013/09/03/high-performance-js-tip/）。

我在vanilla Javascript（绝对没有jQuery）中getBoundingClientRect（）的替代方法是什么？我的前端框架是AngularJS 1.5.8，我已经使用组件构建了应用程序（期待将来将我们的大型应用程序迁移到NG2）。谢谢！

Answer 1

Element.getBoundingClientRect()是“vanilla”，虽然它是规范working draft的一部分。要使代码更高效，请限制调用次数。您提到的提及类似性能的链接仅表示：

应该缓存或避免从DOM获取任何计算维度的所有调用。

Answer 2

<强> !!以下解决方案不能与CSS3规模转换结合使用，但它可以替代：

function getPosition(elm) {
  var xPos = 0, yPos = 0;

  while(elm) {
    xPos += (elm.offsetLeft - elm.scrollLeft + elm.clientLeft);
    yPos += (elm.offsetTop - elm.scrollTop + elm.clientTop);
    elm = elm.offsetParent;
  }

  return { x: xPos, y: yPos };
}

Source

Vanilla JS替代元素.getBoundingClientRect（）

2 个答案: