javascript dom innerhtml scrollheight performance

javascript dom innerhtml scrollheight performance

本文关键字：performance scrollheight innerhtml dom javascript      更新时间：2023-09-26

我的问题是两部分：

问题的第一部分：

测试 A：

    t1 = new Date().getTime();
    for (i=0; i<205; i++) {
        document.getElementById("divTest").innerHTML = sText;
    }           
    t2 = new Date().getTime();
    alert(t2-t1);

结果：16ms

测试 B;

    document.getElementById("divTest").innerHTML = sText;
    t1 = new Date().getTime();
    for (i=0; i<205; i++) {         
        if ( document.getElementById("divTest").scrollHeight > document.getElementById("divTest").clientHeight ) {
            j++;
        }
    }           
    t2 = new Date().getTime();
    alert(t2-t1);

结果：2ms

所以从理论上讲，如果我们把两者都放在循环中，我们应该绕过：18 毫秒，但测试 c 证明我错了：

测试 C：

    t1 = new Date().getTime();      
    for (i=0; i<205; i++) {
        document.getElementById("divTest").innerHTML = sText;       
        if ( document.getElementById("divTest").scrollHeight > document.getElementById("divTest").clientHeight ) {
            j++;
        }
    }           
    t2 = new Date().getTime();
    alert(t2-t1);

结果 ： 240ms

惊人的240毫秒!!该行为在浏览器之间是一致的。为什么会这样？

问题的第 2 部分：

因为 

document.getElementById("divTest").innerHTML = sText;

通常很慢，我在这里找到了一种更快的方法：http://blog.stevenlevithan.com/archives/faster-than-innerhtml，因此最终实现（测试 C）变为：

    t1 = new Date().getTime();      
    for (i=0; i<205; i++) {
        el = document.getElementById("divTest").cloneNode(false);
        el.innerHTML = sText;
        document.getElementById("divTest").parentNode.replaceChild(el, document.getElementById("divTest"));
        if (el.scrollHeight > el.clientHeight) {
            j++;
        }
    }           
    t2 = new Date().getTime();
    alert(t2-t1);

结果为 105ms，优于 240ms

但是我想知道是否通过父节点或其他一些 dom 操作方式，我可以获得一种更快的方法来访问滚动高度和客户端高度，就像我用直接 DOM 操作替换 innerHTML 一样？

提前感谢！

  1. 当你改变innerHTML时，浏览器必须重新计算DOM。但是，如果您多次更改innerHTML，则可以通过在需要时不重新计算 DOM 来优化。因此，它花费的时间比其他方式要短得多。但是，当您访问scrollHeight时，它需要更新的 DOM，因此每次都必须停止并重新计算。
  2. 您可以通过缓存要修改的元素来更好地优化。 var div = document.getElementById('divTest')，然后使用 div 引用该元素。除此之外，您仍然有每次重新计算 DOM 的障碍。总的来说，你不应该让这种事情像这样迭代 200+ 次，即使你做任何事情少于半秒也不是毁灭性的。
相关文章：