1

我的问题分为两部分：

问题的第1部分：

测试一个：

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

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

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

提前致谢！

4

1 回答 1

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