0

次のコードを使用すると

var html = "";
$.map(data.modelTypes, function (item) {
    html+= "<option>" + item.type + "</option>";
});
$("#drowdown").html(html);

私のjavascriptが$（ "＃dropdown"）要素に追加しなければならないHTMLがたくさんあるので、ブラウザが数秒間クラッシュします。最終的には正常に動作し、ドロップダウンリストがいっぱいになりますが、とにかくあります。ブラウザがクラッシュしないようにしますか？

4

4 に答える 4

2

解析する必要のある巨大な文字列を連結しないでください。実際の要素を作成して、次の要素を選択してください。

var options = $.map(data.modelTypes, function (item) {
  return $('<option>', { text: item.type })[0];
});
$("#drowdown").empty().append(options);

注：mapメソッドをとして使用していた場合は、関数で値を返す必要があります。そうすると、メソッドeachから返された値の配列が取得されます。map

編集：

一部のテストでは、jQueryを使用して要素をループおよび作成する代わりに、よりプレーンなJavascriptを使用すると、2倍の速度になることが示されています。

var options = [];
for (var i =0; i < data.modelTypes.length; i++) {
  var o = document.createElement('OPTION');
  o.text = data.modelTypes[i].type;
  options.push(o);
}
$("#drowdown").empty().append(options);

Firefoxの私のコンピューターでは、これにより約1秒で1000000のオプション要素が追加されます。

とにかく、非常に多くのオプションがある場合は、おそらくUIを再考する必要があります...

于 2012-10-04T09:46:39.770 に答える
0

文字列連結の代わりにjavascriptでStringBufferを使用する

Javascriptでの文字列連結と文字列バッファ

文字列の連結は非常に遅い操作です。文字列バッファを使用する必要があります。

function StringBuffer() {
this.__strings__ = new Array;
}

StringBuffer.prototype.append = function (str) {
    this.__strings__.push(str);
};

StringBuffer.prototype.toString = function () {
    return this.__strings__.join("");
};


StringBuffer.prototype.empty = function(){
    this.__strings__.length = 0;
};
于 2012-10-04T09:49:49.653 に答える
0

これで処理が高速化されるかどうかはわかりませんが、ドロップダウンリストに直接追加してみませんか？

$.each(data.modelTypes, function(i, value) {
        $('#drowdown').append($('<option>').text(value).attr('value', value));

あなたの場合、アイテムの膨大なリストがあるので、DocumentFragmentの使用を検討することをお勧めします。次の行に何か：

var dropdown= $("#drowdown").empty();

var frag = document.createDocumentFragment();
data.modelTypes.each( function(item) {
    frag.appendChild($('<option>').text(item).attr('value', item));
});

dropdown.append(frag);
于 2012-10-04T09:52:01.777 に答える
0

まず、$。mapの使用です。JSのforと比較すると、パフォーマンスが異なります。もう1つは、.htmlの使用です。推奨されますが、データが多い場合は、ブラウザーのJSインタープリターが数秒間ブロックします。appendを使用して、サイクル内で一度に1つのオプションを追加してみませんか？

for (i = 0; i < data.modelTypes.length; i++) {
  $("#drowdown").append("<option>"+data.modelTypes[i].type+"</option>")); 
}

それは少し擬似コードで、コンパイルされるかどうかはわかりませんが、それは私の2セントです。それ以外は、HTML構造の動的な変更は常に重いものになりますが、JS変数やjqueryオブジェクトの代わりに文字列に依存することでそれを軽減できます。

于 2012-10-04T10:33:28.963 に答える