问题的第1部分：

测试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操作，我可以更快地访问scrollheight和clientheight，就像我用直接DOM操作替换innerHTML一样？

提前致谢！

Answer 1

当您更改innerHTML时，浏览器必须重新计算DOM。但是，如果您多次更改innerHTML，则可以通过不重新计算DOM进行优化，直到需要为止。因此，它花费的时间明显短于其他情况。但是，当您访问scrollHeight时，它需要更新的DOM，因此每次都必须停止并重新计算。
您可以通过缓存正在修改的元素来更好地优化。 var div = document.getElementById('divTest')然后使用div来引用该元素。除此之外，您每次都有重新计算DOM的障碍。总的来说，你不应该像这样重复200多次这样的事情，即使你做了不到半秒钟的事情也不是毁灭性的。

javascript dom innerhtml scrollheight表现

问题的第1部分：

问题的第2部分：

1 个答案: