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

Question

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

我一直在使用各种调试和计时技术来完成我的代码并重写可能很慢的所有内容 - 比如基于jQuery的部分,其中本机可能做得更好等等.该函数的作用基本上是采用一串html文本并将其剪切为完全适合3个没有固定位置或大小的DIV(客户端模板机制).

目前,整个功能需要大约100毫秒才能在iPad浏览器中执行(但在生产环境中我需要理想地执行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 属性，因此访问应该比通过函数更快。