最佳的HTML行模板注入方法

Question

我有一个包含大量数据行的JSON文件，通过ajax加载。

然后我为每一行创建相应的HTML代码，显示其中一些数据，如下所示。

var gl = $("#gameslist");
$.each(DATA.games, function(index, value) {
  gl.append( '<div>... lots of html code here ... '+value.somedata+'</div>');
}

这似乎非常缓慢，特别是在移动Safari浏览器上。有没有什么技巧或jQuery插件可以加速这个过程？

编辑：根据要求，这里是Ajax调用：

$.ajax({
  dataType: "json",
  url: "../games.json"
})
.done(function(gamesjson){
    DATA = gamesjson;
    buildPage(); // this one is calling the above code
  })
.fail(function(){
    console.log("games.json error");
  })
;

- clamp

---

不要使用 .each，而是使用 for 循环？ - CodingIntrigue

你确定是这段代码导致了速度变慢吗？你有什么方法来定位问题吗？能否把这段代码和 AJAX 调用一起展示给我们看看（大概率是调用了这段代码）？ - George Stocker

@RGraham：好的，但是为什么你认为 .each 比 for 循环慢？ - clamp

@clamp 这并不是很大的问题--我问这个问题是因为它无法加载数据，直到 Ajax 调用完成（这就是为什么我想看看调用它的 Ajax 调用的代码），如果这个 Ajax 调用需要很长时间，那么它会让人觉得这是问题所在，但实际上并不是。 - George Stocker

嘿，如果你找到了一些确定的方法，那么能否请你测试一下（使用计时器），然后发布你所做的内容，这将是很好的。 - Anand

Answer 1

它很慢是因为DATA.games可能非常庞大，而你在每次循环迭代中调用（好的，是缓存的）$("#gameslist")，但你在使用append()。

为了加快速度，创建一个变量来保存HTML的字符串表示形式（包含DIV和数据），然后在for循环内使用+=向字符串附加，一旦循环结束，只需一次附加到$("#gameslist")即可。

这里我创建了一个演示链接，以展示巨大的差异：

仅进行1000次迭代和每个迭代的HTML复杂度仅为4个元素/迭代
在循环内使用.append() = 约100毫秒
仅在循环后使用.append() = 约30毫秒

在 for 循环 中的两个测试... 这一切都只是关于如何正确使用 .append().

现在回到 $.each 和老式的 for 之间速度差异，我发现了一个有趣的 jsPerf:

http://jsperf.com/browser-diet-jquery-each-vs-for-loop _{(注意： 分数越高越好)}

---

^{Memo: 测试代码片段：}

var initialTime = new Date().getTime();

for(var i=0; i<10000; i++){
   // your code
}

console.log( new Date.getTime() - initialTime ); // ms

- Roko C. Buljan

Answer 2

您在每次迭代中都修改了DOM，如果您只修改DOM一次，那么它将大大加快速度。使用片段来保存元素，同时迭代，然后在最后一次性附加所有元素：

var gl = document.createDocumentFragment();

$.each(DATA.games, function(index, value) {
    var div  = document.createElement('div'),
        text = document.createTextNode('... lots of html code here ... '+value.somedata);

    gl.appendChild(div.appendChild(text));
}

$("#gameslist").append(gl);

- adeneo