ブートストラップの選択ロードがIEで長すぎます

Question

ブートストラップ選択ドロップダウンリストに1000レコードをロードしています。 Chromeでは約2秒かかりますが、IE 9では30秒かかります。また、IEのブートストラップモーダルをキャンセルするかxoutすると10秒もかかります。 APIコールはOKですが、レンダリングは非常に遅いです。ある人が私にある方向を教えてくれますか？

私は顧客のリストを読み込み、選択したものを設定しています。ここにコードがあります。

使用できる

var customerPicker = $('#customer-picker'); 
    API.getCustomers().then(function (result) { 
     loadDropdown(customerPicker, result.customers); 

     // set the selected to current customer; it takes 10s in IE 
     customerPicker.val(currentCustomerId).selectpicker('refresh'); 

     // it takes about 10s in IE too. selector is the bs modal div 
     $(selector).css('z-index', '1060').modal('show'); 
    }).catch(function (errorMessage) { 
     ToastManager.showError(errorMessage || 'An error occurred while loading customer list. Please try again.'); 
    }); 

    function loadDropdown($div, arr) { 
     var options = ''; 
     $.each(arr, function (i, item) { 
      options = options + '<option value="' + item.Value + '">' + item.Text + '</option>'; 
     }); 
     $div.html(options); 
    } 

Answer 1

：ユーティリティ・ロード1000 +レコードの
選択2種類のは良いアイデアではありません。
https://select2.github.io/examples.html

Answer 2

ループ内でinnerHTMLを設定しようとしましたか。最後にこのの代わりに

$div[0].innerHTML += '<option value="' + item.Value + '">' + item.Text + '</option>'; 

;

$div.html(options); 

Answer 3

はおそらく、あなたはそれが本当に一度ロードしていますどのように多くのレコードを処理するために、シリアライズライブラリを検討したいです。 Clusterize.jsは非常にうまく作成されており、クライアントが現在閲覧しているブラウザのみをブラウザに表示させることができます。これは、この方法で処理される最大100,000件以上のレコードを表示します。

https://clusterize.js.org/

Answer 4

jqueryのは、古いブラウザでヒットパフォーマンスを体験することができます。 Here's a solutionに似ています。 $.each()はすでにネイティブJSに比べてかなり遅いです。