使Jquery \\ Javascript更高效

Question

我有以下代碼片段可以即時生成選擇列表。 當檢索到的記錄在0-300條記錄之間時，該代碼可以正常工作。 但是，當我嘗試使用超過此數量的記錄時，准確地記錄了671條記錄，瀏覽器（IE，FF，Chrome，Opera）掛起，似乎javascript占用了大量資源，並且選擇后瀏覽器變慢了經過5分鍾的等待后，最終生成了選項。...我正在尋找一種提高效率並防止掛斷的方法，因為我將處理多達5000條記錄

$("#idea_selectrel").on("change",function(){
       var attributeid = $("option:selected",this).val();
       $.post("/OCSRM/PopulateHTMLTablesServlet.do",{"attributeid":attributeid,"table":'idearelations'},function(data){
           if(!$.isEmptyObject(data))
           {
               $("#idea_selectrelvalue option:not(:first)").remove();
               var html='';
               var len = data.length;               
               for(var i=0,len = data.length; i<len; i++ )
               {
                   var relvalue = [data[i].relvalue];
                   var description = [data[i].description];
                   html +='<option value="'+relvalue+'">'+relvalue+' - '+description+'</option>';
                   $("#idea_selectrelvalue").append(html).show();
               }
           }
           else
           {
               alert('No data found.');

           }


       },'json');
       //alert(attributeid);

    });

Answer 1

您的代碼正在構建包含選項的HTML長字符串。 它還將字符串一遍又一遍地附加到<select>元素。

移動.append()的循環后 ：

           for(var i=0,len = data.length; i<len; i++ )
           {
               var relvalue = [data[i].relvalue];
               var description = [data[i].description];
               html +='<option value="'+relvalue+'">'+relvalue+' - '+description+'</option>';
           }
           $("#idea_selectrelvalue").append(html).show();

Answer 2

無法測試代碼，但據我所知，您沒有清除循環內的html變量，目前，將為每個迭代遞歸添加html，並且每個迭代都在更新DOM，這將變得非常大，快。

我不確定這是否是設計使然，但如果不是設計原因，請嘗試將附加項移出循環。

           var html='';
           var len = data.length;               
           for(var i=0,len = data.length; i<len; i++ )
           {
               var relvalue = [data[i].relvalue];
               var description = [data[i].description];
               html +='<option value="'+relvalue+'">'+relvalue+' - '+description+'</option>';
           }

           $("#idea_selectrelvalue").append(html).show();

Answer 3

即使不使用JS創建的很多DOM元素也將加載緩慢。 假設您沒有辦法在服務器上預先生成選擇並將其向下發送，則可以嘗試不將值附加到循環中。 您可以構建一串選項值，然后在創建字符串后，將select的html設置為生成的字符串。 循環中的DOM操作可能是該級別的罪魁禍首。 但是，必須注意的是，無論如何，大型或深度嵌套的DOM元素都可能是性能問題。