6

現在、次のコードを使用していますが、Chrome では約 10 秒、IE11 では約 2 分かかります。

for (var key in dict) {
    if (dict.hasOwnProperty(key)) {
        combo.innerHTML += "<option value=\"" + dict[key] + "\">" + key + "</option>";
    }
}

私はこのチュートリアルを読んでいました: http://blog.teamtreehouse.com/creating-autocomplete-dropdowns-datalist-elementこれは、大量を扱うときにそのように ajax を使用することを提案しましたが、大が 100 個のアイテムを指すかどうかはわかりません。 100,000 アイテム。

var request = new XMLHttpRequest();

request.onreadystatechange = function(response) {
  if (request.readyState === 4) {
    if (request.status === 200) {

      var jsonOptions = JSON.parse(request.responseText);

      jsonOptions.forEach(function(item) {

        var option = document.createElement('option');
        option.value = item;
        dataList.appendChild(option);

      });

    } else {
      console.log("Failed to load datalist options");
    }
  }
};

request.open('GET', 'html-elements.json', true);
request.send();

request.responseTextに置き換えることでこれを辞書で機能させようとしましたがJSON.parse(JSON.stringify(dict));、ファイルにないため、最初に要求を行うのに問題が発生しています。

どうすればいいですか？これに DataList を使用すべきではない場合、どの代替手段をお勧めしますか?

前もって感謝します。

4

4 に答える 4

7

パフォーマンスを高速化できる領域の 1 つは、DOM への書き込みが遅いドキュメント フラグメントを使用する場合です。

var frag = document.createDocumentFragment();

for (var key in dict) {
    if (dict.hasOwnProperty(key)) {
        var option = document.createElement("OPTION");
        option.textContent = key;
        option.value = dict[key];
        frag.appendChild(option);
    }
}

combo.appendChild(frag);
于 2015-05-19T21:39:55.983 に答える
2

パフォーマンスを向上させる簡単な方法は、最初に HTML 文字列を作成してから、それを innerHTML に割り当てることです。

var htmlStr = '';
for (var key in dict) {
    if (dict.hasOwnProperty(key)) {
        htmlStr += "<option value=\"" + dict[key] + "\">" + key + "</option>";
    }
}
combo.innerHTML = htmlStr;

違いは非常に大きい: http://jsperf.com/string-append-vs-dom

于 2015-05-19T21:49:33.730 に答える