JavaScript-Jquery异步加载大概100条数据或更多，用append()方法好一点，还是html()方法重置元素的HTML效率高？

Question

页面元素A，id=divA
后台异步传回list数据
将list的数据渲染到元素A
这里为了方便说明：且设list[i]为每次遍历list得到的页面元素
方式1：
遍历list，$("#divA").append(list[i]);

方式2：
遍历list，htmlStr+=list[i];
遍历完成后，用$("#divA").html(htmlStr);

自己测了下，感觉不太明显

Answer 1

方式2快，大概是因为DOM操作少，浏览器的重绘与重排少。

我建立个简单的测试，见jsPerf

Answer 2

原因应该就是这个:
http://tech.pro/tutorial/1254/9-ways-to-optimize-your-front-end-performance

Use DocumentFragments or innerHTML Instead of Mass Element Injection

DOM operations are taxing on the browser. Despite performance
improvements in browsers, the DOM is slow and if you aren't aware of it,
you could be playing to that slowness. That's why it's important to minimize mass DOM node creation and immediate injection.