的HTML

Question

我面临迭代记录列表的问题，由于这种性能下降，因此在屏幕上加载数据需要花费太多时间。

我尝试了以下方案。

的HTML

 <select class="append"/>

JS

var listOfrecords = [{"name":"hello"},{},{}......etc];//assume 3800 records 

 using forEach
 =======================
listOfrecords.forEach(function(index,record){
   //I tried both
  $(".append").append('<option>'+record.name+'</option>');
        or
  $(".append").html('<option>'+record.name+'</option>');
})

 using for loop
=====================
for(var int i=0;i<=listOfrecords.length;i++){
  //I tried both
  $(".append").append('<option>'+listOfrecords[i].name+'</option>');
        or
  $(".append").html('<option>'+listOfrecords[i].name+'</option>');
 }

  using while loop
 ===================
  var i = listOfrecords.length;
  while(i--){
   //I tried both
  $(".append").append('<option>'+listOfrecords[i].name+'</option>');
        or
  $(".append").html('<option>'+listOfrecords[i].name+'</option>');
  }

  using for in
  ============
 for(var i in listOfrecords){
  //I tried both
  $(".append").append('<option>'+listOfrecords[i].name+'</option>');
        or
  $(".append").html('<option>'+listOfrecords[i].name+'</option>');

 }

数据显示在屏幕上，但需要花费太多时间。任何人都可以建议我，有没有办法更快地渲染数据。

Answer 1

访问DOM非常昂贵 - 您实际上是在告诉浏览器使用每个“append”遍历DOM树，然后插入另一个元素。因此，每次访问dom时，您的代码都会以指数级的方式运行。由于您使用循环并访问DOM树3800次，我可以看到您的浏览器会抱怨的原因。

更好的做法是构建HTML字符串或DocumentFragment，因为您不需要使用数组中的每个项访问DOM。

var string = '';

for ( var i = 0, i < elements.length, i++ ) {

    string += '<option>' + elements.content + '</option>';

}

$('body').append(string);

Answer 2

您可以在字符串上迭代和添加值，然后只需调用.append一次。

速度更快，速度增加约9-10倍

var listOfrecords = [{"name":"hello"},{},{}......etc];//assume 3800 records 

var newOptions = '';

listOfrecords.forEach(function(index,record){
    newOptions += '<option>'+record.name+'</option>';
});

$(".append").append(newOptions); //only having to call append insert once

<select class="append"/>

字体：http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

迭代3800条记录，在IE浏览器中占用太多时间

的HTML

JS

2 个答案: