目前,当我在搜索结果中获得来自搜索我循环的结果,并将其添加到一个列表(我想这将导致浏览器重新渲染页面被添加每次项目 - 有没有办法来证实这一点?)。
$.each(results, function(key, val){
$(".results").append("<div>"+ val +"</div>");
});
在第二个浏览器,这部分落后一点(有动画和东西......)。 会更有效地创建单独的div.results和JavaScript的添加项目,然后在DOM更换呢? 什么是做到这一点的最有效方法是什么? 以及如何这个事情通常做什么?
我会做的是使用document.createDocumentFragment()
并尽一切可能的操作那里,触感真实DOM一次。 (除了在一个循环中可能是一个好主意,一旦缓存选择):
var frag = document.createDocumentFragment();
$.each(results, function(key, val){
var a = document.createElement("div");
a.innerHTML = val;
frag.appendChild(a);
});
$(".results").append(frag);
你重新查询DOM循环的每次迭代。 没有理由为这个,如果你不认为数量.results
元素是怎么回事,当你循环改变。
如果你很在意性能,可以减少你的jQuery的使用。
var frag = document.createDocumentFragment();
$.each(results, function(key, val){
frag.appendChild(document.createElement("div"))
.appendChild(document.createTextNode(val))
});
// Since you're using a class, I assume there's more than one `.results` element
$(".results").each(function(i, el) {
el.appendChild(frag.cloneNode(true));
});