javascript - 优化 JS/jQuery 性能(getBoundingClientRect)并消除布局重绘

Question

所以我有一个项目，我试图最大限度地优化一个相当复杂的 Javascript 函数 - 部分原因是它应该在智能手机 (Webkit) 上运行并且每一点都很重要。

我一直在使用各种调试和计时技术来检查我的代码并重写所有可能很慢的东西——比如基于 jQuery 的部分，而 native 可能做得更好等等。该函数所做的基本上是获取一串 html 文本并将其剪切以完全适合 3 个没有固定位置或大小的 DIV(客户端模板机制)。

目前，整个函数在 iPad 浏览器中执行大约需要 100 毫秒(但在生产环境中，理想情况下我需要执行 200 次)，问题是在这 100 毫秒中，至少有 20 毫秒是因为这一行代码(3 个循环):

var maxTop = $(cur).offset().top + $(cur).outerHeight();

“cur”只是对容器 DIV 元素的引用，上面的行正在计算它的底部位置(所以我的文本应该在哪里中断)。通过查看偏移 jQuery 代码，我了解到它使用 getBoundingClientRect 甚至消除 jQuery 偏移/大小调整并直接调用它不会加速它 - 所以它的 getBoundingClientRect 错误(至少在 Webkit 中)。我对此做了一些研究，我知道它会导致布局重绘。

但仍然无法相信我执行了多个 DOM 清除/克隆/追加，而且所有这些都比简单的元素位置查找快得多？有什么想法吗？也许是特定于 webkit 的东西？或者不会导致重绘的东西？

非常感谢!

Answer 1

你试过吗:

var maxTop = cur.offsetTop + cur.offsetHeight;

?

要点是，offsetTop 和 offsetHeight 是原生 dom 属性，因此访问应该比通过函数访问更快。