javascript - element.getBoundingClientRect() 的普通 JS 替代品

Question

我一直在我的应用程序中使用 getBoundingClientRect() 来在用户拖动项目时获取元素的尺寸。我一直在使用它，而且效果很好；但是，在鼠标移动期间执行此计算时，我开始遇到主要的性能问题。移动的节点越大，情况就越糟。我在 Chrome 中使用了分析工具，注意到这个函数被包裹在用户拖动时触发的鼠标移动事件中，需要很长时间(每次调用 31.4 毫秒——将其扩展为每次调用鼠标移动的时间。)在研究这个问题时，我遇到了其他使用过它的人，他们也注意到了性能问题(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 的一部分的规范。要使您的代码性能更高，请限制调用次数。您提到的提到类似性能的链接就是这样说的:

All calls to get any calculated dimension from the DOM should be cached or avoided.