1

私の質問は2つの部分です：

質問のパート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

驚異の240ms!!! 動作はブラウザ間で一貫しています。なぜこれが起こるのですか？

質問のパート2：

以来

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

は一般的に遅いですが、ここでより高速な方法を見つけました: http://blog.stevenlevithan.com/archives/faster-than-innerhtmlしたがって、最終的な実装 ( test 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 よりも優れています

しかし、parentnode またはその他の dom 操作方法を使用して、innerHTML を直接 DOM 操作に置き換えたように、scrollheight と clientheight にアクセスするより高速な方法を取得できるかどうか疑問に思っていました。

前もって感謝します！

4

1 に答える 1

3
  1. を変更するinnerHTMLと、ブラウザはDOMを再計算する必要があります。ただし、innerHTML複数回変更する場合は、必要になるまでDOMを再計算しないことで最適化できます。したがって、それ以外の場合よりも大幅に短い時間がかかります。ただし、アクセスするときscrollHeightは更新されたDOMが必要なため、毎回停止して再計算する必要があります。
  2. 変更する要素をキャッシュすることで、はるかに最適化できます。var div = document.getElementById('divTest')次に、を使用divして要素を参照します。それを除けば、あなたはまだ毎回DOMを再計算するという障壁を抱えています。ただし、全体として、このようなことを200回以上繰り返すべきではありません。また、0.5秒未満のことを行っても、壊滅的ではありません。
于 2012-05-25T08:28:14.563 に答える