Уменьшение время подгрузки данных в Chosen

120

24 августа 2019, 18:20

Что имею: n-ное количество переменных (500-2000), которые достаю из базы и передаю в нужный мне `, созданного при помощи плагина Chosen:

    function get_ims() {
    var select = document.getElementById('choosen')
    axios.get('functions.php?query=' + 'ims')
        .then(function (response) {
            var data = response.data;
            for (s in data) {
                $(select).append("<option value='" + data[s] + "'>" + data[s] + "</option>");
                $(select).trigger("chosen:updated");
            }
        });
}

Из-за такого большого количества данных загрузка самой страницы происходит ужасно медленно - в Хроме около 30секунд, против к примеру секунды, когда переменных было около 50. Есть ли какие варианты способные уменьшить время обработки?

Answer 1

Вот наглядное сравнение производительности $.append() и appendChild(). 500 итераций. Как видите на ванильном js выполняется в 50-80 раз быстрее.

console.time("jq append"); 
for (let i = 0; i < 500; i++) { 
  $("body").append("<div></div>"); 
} 
console.timeEnd("jq append"); 
 
document.body.innerHTML = ""; 
 
console.time("pure js appendChild"); 
for (let i = 0; i < 500; i++) { 
  let div = document.createElement("div"); 
  document.body.appendChild(div); 
} 
console.timeEnd("pure js appendChild");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Я думаю, что у вас загрузка страницы происходит медленно, из-за того что вы сильно нагружаете DOM-дерево добавляя каждый option по одному в select, также после добавления каждого узла вы вызываете $(select).trigger("chosen:updated");. Предлагаю добавлять options все сразу и один раз вызывать trigger;

function get_ims() { 
  var select = $('#choosen'); 
  axios.get('functions.php?query=ims') 
    .then(function(response) { 
      var data = response.data, 
        options = []; 
      for (var s in data) { 
        options.push('<option value="' + data[s] + '">' + data[s] + '</option>'); 
      } 
      $(select).append(options).trigger("chosen:updated");; 
    }); 
}