Можно ли ускорить итерацию большого файла JSON в JavaScript?

Question

У меня есть 3 файла JSON (provinces.json, towns.json, barangays.json).

В файле JSON перечислены 88 провинций.В каждой провинции есть много городов, а в каждом городе - много барангай.

provinces.json имеет следующий пример содержания: (провинций около 88 записей)

{
  'provCode': 01,
  'provName': 'Province Name'
}

towns.json имеет следующий пример содержимого: (количество городов около 1647 записей)

{
  'ctyCode': 001,
  'ctyName': 'City Name',
  'provCode: 01
}

barangays.json содержит следующий пример содержимого: (barangaysоколо 8197 записей)

{
  'brgyCode': 0001,
  'brgyName': 'Barangay Name',
  'ctyCode': 001,
  'provCode: 01
}

Я использую 1 выпадающий список для каждого из файлов JSON, для которого я запускаю событие onchange, чтобы заполнить следующий выпадающий список.

Соответствующийкод следующий:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  populateProvince();

  $('#province').change(function() {
    populateCity();
  });

  $('#city').change(function() {
    populateBrgy();
  });

  function populateProvince() {
    $('#province').html('');
    $.getJSON('provinces.json', function(data){
      $.each(data, function(index, object) {
        $('#province').append(`<option data-code="${object.provCode}" value="${object.provName.toUpperCase()}">${object.provName.toUpperCase()}</option>`);
      });
    });
  }

  function populateCity() {
    $('#city').html('');
    $.getJSON('cities.json', function(data){
      $.each(data, function(index, object) {
        if(object.provCode === $('#province option:selected').data('code')) {
          $('#city').append(`<option data-code="${object.ctyCode}" value="${object.ctyName.toUpperCase()}">${object.ctyName.toUpperCase()}</option>`);
        }
      });
    });
  }

  function populateBrgy() {
    $('#brgy').html('');
    $.getJSON('barangays.json', function(data){
      $.each(data, function(index, object) {
        if(object.provCode === $('#province option:selected').data('code') && object.ctyCode === $('#city option:selected').data('code')) {
          $('#brgy').append(`<option data-code="${object.brgyCode}" value="${object.brgyName.toUpperCase()}">${object.brgyName.toUpperCase()}</option>`);
        }
      });
    });
  }
});
</script>
<select id='province'></select>
<select id='city'></select>
<select id='brgy'></select>

В основном то, что я делаю.После загрузки страницы я заполняю раскрывающийся список выбора провинции содержанием provinces.json.

Затем, выбрав провинцию, я переберу cities.json и проверим, соответствует ли оно provCode, соответствует ли онов выбранной провинции будут заполнены выпадающие списки городов.

То же самое с barangay, если он соответствует выбранной провинции и городу, тогда он будет заполнять выпадающий список barangays.

Население провинций и городов довольнотерпимый.Но когда я начинаю итерацию в barangays с 8000+ записями, но добавляю только около 20 записей, основанных на выбранной провинции и городе, веб-страница останавливается примерно на 10 секунд или более на более старой машине и 5 секунд на более новой машине.вопрос в том, есть ли эффективный способ сделать это?Как ускорить итерацию больших файлов JSON?

Answer 1

Вы можете загружать файлы json только один раз, поэтому при каждом изменении вы можете избежать вызовов по сети

$(document).ready(function() {
  let provs,cities,barangays;

  $.getJSON('provinces.json').done((json) =>{
    provs=json;
    populateProvince();// wait till you get data for province
  })
   $.getJSON('cities.json').done(function(json){
    cities =json;
  })
   $.getJSON('provinces.json').done(function(json){
    barangays =json;
  })


  $('#province').change(function() {
    populateCity();
  });

  $('#city').change(function() {
    populateBrgy();
  });

  function populateProvince(){
    //rest of the code
  }
  function populateCity() {
    //rest of the code
  }
  function populateBrgy(){
    //rest of the code
  }

})

Также не добавляйте option к dom внутри каждой итерации.Скорее создайте переменную и добавьте к ней, затем добавьте эту переменную только один раз

function populateProvince(){
    $('#province').html('');
    let provOptions = ''
      $.each(data, function(index, object) {
        provOptions += $(`<option data-code="${object.provCode}" 
                                value="${object.provName.toUpperCase()}">
                                ${object.provName.toUpperCase()}
                                </option>`)

      });
      $('#province').append(provOptions)
  }