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元素都可能是性能问题。

使Jquery \ Javascript更高效

3 个答案: