Javascript 为什么在CSV中键入word搜索数据时searchbox会变得滞后？

我使用开放式街道地图和传单开发了商店定位器。问题是，当我想在搜索框中键入时，它将变得滞后，无法完成单词。从包含300++数据的CSV文件读取的存储定位器。以下是搜索框的代码：

var locationLat = [];
var locationLng = [];
var locMarker;
var infoDiv = document.getElementById('storeinfo');
var infoDivInner = document.getElementById('infoDivInner');
var toggleSearch = document.getElementById('searchIcon');
var hasCircle = 0;
var circle = [];
//close store infor when x is clicked
var userLocation;
$("#infoClose").click(function() {
  $("#storeinfo").hide();
  if (map.hasLayer(circle)) {
    map.removeLayer(circle);
  }
});
var listings = document.getElementById('listingDiv');
var stores = L.geoJson().addTo(map);
var storesData = omnivore.csv('assets/data/table_1.csv');

function setActive(el) {
  var siblings = listings.getElementsByTagName('div');
  for (var i = 0; i < siblings.length; i++) {
    siblings[i].className = siblings[i].className
      .replace(/active/, '').replace(/\s\s*$/, '');
  }
  el.className += ' active';
}

function sortGeojson(a,b,prop) {
  return (a.properties.name.toUpperCase() < b.properties.name.toUpperCase()) ? -1 : ((a.properties.name.toUpperCase() > b.properties.name.toUpperCase()) ? 1 : 0);
}

storesData.on('ready', function() {

  var storesSorted = storesData.toGeoJSON();
  //console.log(storesSorted);
  var sorted = (storesSorted.features).sort(sortGeojson)
  //console.log(sorted);
  storesSorted.features = sorted;
  //console.log(storesSorted)
  stores.addData(storesSorted);

  map.fitBounds(stores.getBounds());
  toggleSearch.onclick = function() {
    //var s = document.getElementById('searchbox');
    //if (s.style.display != 'none') {
      //s.style.display = 'yes';
      //toggleSearch.innerHTML = '<i class="fa fa-search"></i>';
      //$("#search-input").val("");

      //search.collapse();
      //document.getElementById('storeinfo').style.display = 'none';
      //$('.item').show();
    //} else {
      //toggleSearch.innerHTML = '<i class="fa fa-times"></i>';
      //s.style.display = 'block';

      //attempt to autofocus search input field when opened
      //$('#search-input').focus();
    //}
  };
  stores.eachLayer(function(layer) {

    //New jquery search
    $('#searchbox').on('change paste keyup', function() {
      var txt = $('#search-input').val();
      $('.item').each(function() {
        if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) {
          $(this).show();
        } else {
          $(this).hide();
        }
      });
    });

var locationLat=[]；
var locationLng=[]；
变异标记；
var infoDiv=document.getElementById（'storeinfo'）；
var infoDivInner=document.getElementById（'infoDivInner'）；
var-toggleSearch=document.getElementById（'searchIcon'）；
var hasCircle=0；
var循环=[]；
//单击x时关闭存储信息
var用户位置；
$（“#信息关闭”）。单击（函数（）{
$（“#storeinfo”）.hide（）；
if（地图图层（圆））{
地图移除层（圆形）；
}
});
var listings=document.getElementById（'listingDiv'）；
var stores=L.geoJson（）.addTo（map）；
var storesData=omnivore.csv（'assets/data/table_1.csv'）；
功能设置激活（el）{
var sides=listings.getElementsByTagName（'div'）；
对于（变量i=0；i<1.length；i++）{
兄弟姐妹[i].className=兄弟姐妹[i].className
.replace（/active/，“”）。replace（/\s\s*$/，“”）；
}
el.className+=‘活动’；
}
函数sortGeojson（a、b、prop）{
返回（a.properties.name.toUpperCase（）b.properties.name.toUpperCase（））？1:0）；
}
storesData.on（'ready'，function（）{
var storesorted=storesData.toGeoJSON（）；
//控制台日志（存储）；
var sorted=（storesorted.features）.sort（sortGeojson）
//控制台日志（已排序）；
storesorted.features=已排序；
//console.log（StoresOrted）
stores.addData（storesserted）；
map.fitBounds（stores.getBounds（））；
toggleSearch.onclick=function（）{
//var s=document.getElementById（'searchbox'）；
//如果（s.style.display！=“无”）{
//s、 style.display='yes'；
//toggleSearch.innerHTML=''；
//$（“#搜索输入”）.val（“”）；
//search.collapse（）；
//document.getElementById（'storeinfo'）.style.display='none'；
//$（'.item'）.show（）；
//}否则{
//toggleSearch.innerHTML=''；
//s、 style.display='block'；
//打开时尝试自动聚焦搜索输入字段
//$（“#搜索输入”）.focus（）；
//}
};
stores.eachLayer（函数（层）{
//新jquery搜索
$（“#搜索框”）。在（'change paste keyup'，function（）上{
var txt=$（“#搜索输入”）.val（）；
$（'.item'）。每个（函数（）{
if（$（this.text（）.toUpperCase（）.indexOf（txt.toUpperCase（））！=-1）{
$（this.show（）；
}否则{
$（this.hide（）；
}
});
});

我不知道搜索框中延迟的原因是什么。这是代码或csv文件中的错误吗？谢谢每次迭代

$（'.item'）。每个
都会导致布局更改，因为
$（this）.hide（）
或
$（this）.show（）
会在样式设置为“显示：无”时，将项目删除/添加到DOM中。DOM操作和相应的布局更改代价高昂

<>您可以考虑使用诸如<代码> AppDebug < /C> < /P>之类的函数来累积更改并对DOM进行一批更新。