提高Jquery\Javascript的效率

我有下面一段代码来动态生成一个选择列表。当检索到的记录介于0-300条记录之间时，代码正常工作。然而，当我尝试处理超过这个数字的记录时，确切地说是671条记录，浏览器、FF、Chrome、Opera挂起，javascript似乎占用了大量资源，在等待5分钟后最终生成select选项后，浏览器变得缓慢。。。。 我正在寻找一种方法，使这更有效，并防止这样的挂断，因为我将与记录高达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);

    });

---

您的代码正在构建一个包含选项的长HTML字符串。它还将字符串一次又一次地追加到元素中

将.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();

---

您的代码正在构建一个包含选项的长HTML字符串。它还将字符串一次又一次地追加到元素中

将.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();

---

这是很多DOM元素，即使在没有JS的情况下创建，加载速度也会很慢。假设您没有办法在服务器上预生成select并将其发送下去，您可以尝试不在循环中追加该值。您可以构建一个选项值字符串，然后在创建该字符串后，将select的html设置为生成的字符串。循环中的DOM操作可能是该级别的罪魁祸首。但是，重要的是要注意，大型或深度嵌套的DOM元素可能是性能问题。

这是许多DOM元素，即使在没有JS的情况下创建，其加载速度也会很慢。假设您没有办法在服务器上预生成select并将其发送下去，您可以尝试不在循环中追加该值。您可以构建一个选项值字符串，然后在创建该字符串后，将select的html设置为生成的字符串。循环中的DOM操作可能是该级别的罪魁祸首。但是，重要的是要注意，大型或深度嵌套的DOM元素可能是性能问题。

无法测试代码，但从我可以看出，您没有清除循环中的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();

---

无法测试代码，但我可以告诉您，您没有清除循环中的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();

---

5000个dom元素迫切需要重新思考界面的设计。理想情况下，您应该在服务器上对此进行分页。在构建完所有html之后，将其添加到DOM中，而不是逐段添加。您希望用户如何处理包含5000个选项的下拉列表？@BenjaminPaul肯定会对此进行研究。5000个DOM元素正在尖叫，要求重新思考您的界面设计。理想情况下，您应该在服务器上对此进行分页。在构建完所有内容后，将html添加到DOM中，而不是逐段添加。您希望用户如何处理包含5000个选项的下拉列表？@BenjaminPaul肯定会对此进行调查。最好在发布前4分钟检查是否已经发布了完全相同的答案：最好在发布前4分钟检查是否未发布完全相同的答案：