javascript dom innerhtml scrollheight 性能

Question

我的问题分为两部分:

问题的第一部分:

测试一个:

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

    }           
    t2 = new Date().getTime();
    alert(t2-t1);

结果:1​​6 毫秒

测试 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);

结果:2 毫秒

所以理论上，如果我们将两者都放在循环中，我们应该绕过: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);

结果:240 毫秒

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

问题的第二部分:

自从

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);

结果为 105 毫秒，优于 240 毫秒

但是我想知道是否通过 parentnode 或其他一些 dom 操作方式我可以获得访问 scrollheight 和 clientheight 的更快方法，就像我用直接 DOM 操作替换 innerHTML 一样？

提前致谢!

Answer 1

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