跪求各位大神帮忙修改一段JS

Question

for(var i=0;i<valueArr.length;i++){
    if(reg.test(valueArr[i])){
        var div = document.createElement("div");
        div.className="auto_onmouseout";
        div.seq=valueArr[i];
        div.onclick=this.setValue(this);
        div.onmouseover=this.autoOnmouseover(this,div_index);
        div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");
        this.autoObj.appendChild(div);
        this.autoObj.className="auto_show";
        div_index++;
    }
}这段代码是将搜索到的value都放到div里边，然后把DIV塞到一个节点里边。
主要问题是当数据量特别大的时候，页面就会卡死。我想把匹配到的先放到一个数组里边，然后只取这数组的前6个放到DIV里边，然后再塞到节点里。跪求大神帮忙改一下。

Answer 1

你这儿不是有一个统计div数量的div_index吗
循环条件中加上div_index < 7符合你的需求？

Answer 2

//假设你搜索好之后的数据 存储的数组为valueArr
for(var i=0;i<valueArr.length;i++){
    if(i<6){
      var div = document.createElement("div");  //创建一个新的div
    var text=""; 
    for(var j=0;j<i;j++){
      text+=valueArr[j]+"<br />";
   }
     div.innerHTML= text;
    
   }
}写了个简单的例子，  其实你如果只需要6条数据，你完全可以把你的数组数据只控制有6条，不需要遍历所有的，然后只取前面的6条，这样性能就好点， 
还有就是如果你想显示不是6条，大批量的话，建议这里也按分页的方式进行填充数据，不要有多少一下子全部塞进来，这样数据量大客户端肯定会阻死，程序上根据需求 控制下，分页取数据是最好的选择 

Answer 3

虽然JS运行线珵与浏览器渲染线程不是同一个，但是他们是不能同进运行的，JS运行时，渲染画面的线程会被挂起，所以在视角 上会出现"卡"。
跟据这个特性，你可以把所有你要渲染的元素先用JS创建完。然后在最后一起渲染。
在你现在的代码里你每循环一次就往页面里append一次，所以会很卡。
你在循环外创建一个DIV，每循环一次就往这个DIV里添加你的东西，等循环完后再把循环外创建的DIV添加到
this.autoObj.appendChild(div);

Answer 4

在for循环的条件中控制下循环次数呢？ 这样会不会更好些？
valueArr.length>=6时 i<6
valueArr.length<6时 i<valueArr.length

Answer 5

var find = 0;
for(var i=0;i<valueArr.length;i++){
    if(reg.test(valueArr[i])){
        var div = document.createElement("div");
        div.className="auto_onmouseout";
        div.seq=valueArr[i];
        div.onclick=this.setValue(this);
        div.onmouseover=this.autoOnmouseover(this,div_index);
        div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");
        this.autoObj.appendChild(div);
        this.autoObj.className="auto_show";
        div_index++;
        if(++find>=6){break;}
    }
}
反正就是6个么