49

このサイトは 3 つの異なる方法でテストを実行しており、最速であると思わ.htmlれ、続いて.append. が続き.innerHTMLます。誰かが私にその理由を説明できますか?

3つの方法を比較しているサイトはこちらです。

関連するこのSOの質問を読んだことがありますが、与えられた答えがよくわかりません.innerHtml.

次の部分がわかりません。

一時要素が作成されます。これを x と呼びましょう。x の innerHTML は、渡した HTML の文字列に設定されます。次に、jQuery は生成された各ノード (つまり、x の childNode) を新しく作成されたドキュメント フラグメントに転送し、次回のためにキャッシュします。次に、フラグメントの childNodes を新しい DOM コレクションとして返します。jQuery は多数のクロスブラウザー チェックやその他のさまざまな最適化を行うため、実際にはそれよりもはるかに複雑であることに注意してください。<div></div>たとえば、jQuery()だけに渡すと、jQuery はショートカットを取り、単純に document.createElement('div') を実行します。

誰かがこれを単純化できますか?

4

7 に答える 7

52

そのベンチマークは無価値です。innerHTMLDOM 操作よりも常に高速です。

jQueryは最初にすべての HTML を含む文字列を準備し、他の人は反復ごとに 1 つの操作を行うため、より高速に見えます。また、jQuery.html() はinnerHTML可能な限り使用することに注意してください。

ベンチマークからの jQuery

var html = '';
for (var i = 0; i < len; i++) {
  html += '<div>Test ' + i + '</div>';
}

$('#list').html(html);

ベンチマークからのinnerHTML

var list = document.getElementById('list');
for (var i = 0; i < len; i++) {
  list.innerHTML = list.innerHTML + '<div>Test ' + i + '</div>';
}

のテストは、innerHTML次のように記述した場合、はるかに高速になります。

var list = document.getElementById('list');
var html = '';

for (var i = 0; i < len; i++) {
    html += '<div>Test ' + i + '</div>';
}

list.innerHTML = html;

http://jsben.ch/#/yDvKH

于 2013-08-23T03:12:07.443 に答える
15

多くの余分なコードを使用している場合.htmlよりもどのように高速化できますか? ここでは jQuery での実装 (jQuery ファイルから直接取得)。.innerHTML.html.innerHTML.html

html: function( value ) {
    return jQuery.access( this, function( value ) {
        var elem = this[0] || {},
            i = 0,
            l = this.length;

        if ( value === undefined ) {
            return elem.nodeType === 1 ?
                elem.innerHTML.replace( rinlinejQuery, "" ) :
                undefined;
        }

        // See if we can take a shortcut and just use innerHTML
        if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
            ( jQuery.support.htmlSerialize || !rnoshimcache.test( value )  ) &&
            ( jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value ) ) &&
            !wrapMap[ ( rtagName.exec( value ) || ["", ""] )[1].toLowerCase() ] ) {

            value = value.replace( rxhtmlTag, "<$1></$2>" );

            try {
                for (; i < l; i++ ) {
                    // Remove element nodes and prevent memory leaks
                    elem = this[i] || {};
                    if ( elem.nodeType === 1 ) {
                        jQuery.cleanData( getAll( elem, false ) );
                        elem.innerHTML = value;
                    }
                }

                elem = 0;

            // If using innerHTML throws an exception, use the fallback method
            } catch(e) {}
        }

        if ( elem ) {
            this.empty().append( value );
        }
    }, null, value, arguments.length );
}
于 2013-08-23T03:20:30.787 に答える
4

@Bratの提案でinnerHTMLの方が速いと思います。

また、ループを作成して文字列を追加する場合は、最初に変数を使用するのが適切です。それはあなたのパフォーマンスをより良くすることです。

良いコード:

var html = '';
for (var i = 0; i < len; i++) {
  html += '<div>Test ' + i + '</div>';
};
$('#list').append(html);

非効率的なコード:

for (var i = 0; i < len; i++) {
  var html = '<div>Test ' + i + '</div>';
  $('#list').append(html);
}

例: http://jsben.ch/#/yDvKH

于 2013-08-23T04:02:11.573 に答える