【课外】8.15 性能问题

[miniflycn]

下面这段代码应当怎么优化性能更好：

for (let i = 0; i < items.length; i++) {
  document.getElementById("listGrid").innerHTML += "<tr><td>" + 
                                                   items[i].name + 
                                                   "</td></tr>";
}

[miniflycn]

答案参考：https://calendar.perfplanet.com/2021/reducing-property-access/

如果自己心目中的答案比这个差可能要思考下是不是自己平时对运行性能不太关注。

[Nick-Dream]

心目中的答案就是这样的[狗头]，避免循环操作dom引起的重绘、重排，把所有改变通过createDocumentFragment对象、JQ对象，html文本等形式缓存，最后一次性插入

[miniflycn]

心目中的答案就是这样的[狗头]，避免循环操作dom引起的重绘、重排，把所有改变通过createDocumentFragment对象、JQ对象，html文本等形式缓存，最后一次性插入

并不一定需要用createDocumentFragment，实际上跟把字符串拼装好再innerHTML性能差不多，差别只在于用createDocuemntFragement可以拿到被插入的对象，这样可以做些其他事情。

[Nick-Dream]

createDocuemntFragement的使用场景是把复制的dom对象进行组装，因为要保留它已绑定的事件