Javascript 优化附加<；李>；进入<；ul>；使用jQuery

我用附加li元素的搜索结果填充列表。我为每个结果更新DOM

for (var i = 0; i < topics.length; i++) {
    $("#searchResults").append(
        $("<li />")
            .append(result.Name)
            .addClass("example")
    );
};

for（var i=0；i”）
.append（result.Name）
.addClass（“示例”）
);
};

我想先创建一组li元素，然后只更新一次DOM树

我试着这样做：

var list = $([]);

for (var i = 0; i < topics.length; i++) {
    list.append(
        $("<li />")
            .append(result.Name)
            .addClass("example")
    );
};

$("#searchResults").append(list);

var list=$（[]）；
对于（var i=0；i”）
.append（result.Name）
.addClass（“示例”）
);
};
$（“#搜索结果”）。附加（列表）；

但是div

$（“#searchResults”）

是空的

---

问题出在哪里？

尝试使用字符串。将所有

li

添加到字符串中，然后将它们放入

searchResults

div的

innerHTML

var list = '';

for (var i = 0; i < topics.length; i++) {
    list +="<li class=example>" + result.Name + "</li>";
}

$("#searchResults").innerHTML = list;

var列表=”；
对于（var i=0；i”+result.Name+“”；
}
$（“#搜索结果”）.innerHTML=list；

---

如果您正在寻找有效性，这可能会更好，因为您没有经常使用DOM引擎。（尽管除非你要添加数百个

li

，否则它可能是无关紧要的。

试着只使用一个字符串。将所有

li

添加到一个字符串中，然后将它们放入

搜索结果

div的

innerHTML

var list = '';

for (var i = 0; i < topics.length; i++) {
    list +="<li class=example>" + result.Name + "</li>";
}

$("#searchResults").innerHTML = list;

var列表=”；
对于（var i=0；i”+result.Name+“”；
}
$（“#搜索结果”）.innerHTML=list；

---

如果您正在寻找有效性，这可能会更好，因为您没有经常使用DOM引擎。（尽管除非您添加数百个

li

，否则这可能是无关紧要的。

类似这样的东西应该快得多：

var ul = $("<ul />");
for (var i = 0, l=topics.length; i < l; i++) {
   $("<li />", { text: result.Name, "class": "example" }).appendTo(ul);
};
$("#searchResults").append(ul.contents());

var ul=$（“
”）；
for（var i=0，l=topics.length；i，{text:result.Name，”class:“example”}）.appendTo（ul）；
};
$（“#搜索结果”）.append（ul.contents（））；

通过使用文档片段（

$（“
”）

）并附加到文档片段，然后在结尾附加，我们不会在每次附加时弄乱整个DOM。此外，我们也不会重复选择

#搜索结果

每个循环…或检查

。长度

也可能会很昂贵

---

注意：此方法仍然使用DOM创建元素（而不是字符串），从而消除了

result.Name

中可能会出错的HTML等问题。

类似的方法应该更快：

var ul = $("<ul />");
for (var i = 0, l=topics.length; i < l; i++) {
   $("<li />", { text: result.Name, "class": "example" }).appendTo(ul);
};
$("#searchResults").append(ul.contents());

var ul=$（“
”）；
for（var i=0，l=topics.length；i，{text:result.Name，”class:“example”}）.appendTo（ul）；
};
$（“#搜索结果”）.append（ul.contents（））；

通过使用文档片段（

$（“
”）

）并附加到文档片段，然后在结尾附加，我们不会在每次附加时弄乱整个DOM。此外，我们也不会重复选择

#搜索结果

每个循环…或检查

。长度

也可能会很昂贵

---

注意：此方法仍然使用DOM创建元素（而不是字符串），从而消除了

结果的问题。Name

具有可能会把事情搞砸的HTML等。

动态创建DOM元素通常比仅使用innerHTML（或其周围的包装器）要慢。此外，使用

+

连接字符串通常比使用

数组.join（“”）

要慢

最后，我怀疑这样的事情会是最快的：

var list = [];

for (var i = 0; i < topics.length; i++) 
    list.push("<li class=example>",topics[i].Name,"</li>");

$("#searchResults").html(list.join(''));

var list=[]；
对于（var i=0；i”，主题[i]。名称“”；
$（“#搜索结果”）.html（list.join（“”））；

动态创建DOM元素通常比仅使用innerHTML（或其周围的包装器）要慢。此外，使用

+

连接字符串通常比使用

数组.join（“”）

要慢

最后，我怀疑这样的事情会是最快的：

var list = [];

for (var i = 0; i < topics.length; i++) 
    list.push("<li class=example>",topics[i].Name,"</li>");

$("#searchResults").html(list.join(''));

var list=[]；
对于（var i=0；i”，主题[i]。名称“”；
$（“#搜索结果”）.html（list.join（“”））；

所有以前的解决方案仍然需要为我们添加的每个元素重新计算、绘制和布局

不要在创建元素时直接将它们附加到文档中，而是将它们附加到

DocumentFragment

中，最后将其添加到DOM中

var el;
var i = 0;
var fragment = document.createDocumentFragment();

while (i < 500) {
    el = document.createElement('li');
    el.innerText = '1ist ' + i;
    fragment.appendChild(el);
    i++;  
}

div.appendChild(fragment);

var-el；
var i=0；
var fragment=document.createDocumentFragment（）；
而（i<500）{
el=document.createElement（'li'）；
el.innerText='1ist'+i；
片段。附加子片段（el）；
i++；
}
子类（片段）；

所有以前的解决方案仍然需要为我们添加的每个元素重新计算、绘制和布局

不要在创建元素时直接将它们附加到文档中，而是将它们附加到

DocumentFragment

中，最后将其添加到DOM中

var el;
var i = 0;
var fragment = document.createDocumentFragment();

while (i < 500) {
    el = document.createElement('li');
    el.innerText = '1ist ' + i;
    fragment.appendChild(el);
    i++;  
}

div.appendChild(fragment);

var-el；
var i=0；
var fragment=document.createDocumentFragment（）；
而（i<500）{
el=document.createElement（'li'）；
el.innerText='1ist'+i；
片段。附加子片段（el）；
i++；
}
子类（片段）；

我找到了相同的解决方案。但是我使用了$（“#searchResults”）.append（ul.children（））；这是同样的效率吗？firebug中的探查器显示了几乎相同的结果。感谢您的帮助！：）@podeig-yup在这里也可以工作，

.contents（）

是一种更通用的方法，适用于其他情况（孩子可能包含文本）：

$（“
，…）

会稍微快一点；）@gnarf-在html和props对象中不能有属性，它会出错，因为它匹配了错误的重载，请尝试：）我找到了相同的解决方案。但是我使用了$（“#searchResults”）.append（ul.children（））