如何通过最大化优化将json转换为html

Question

我有一些json数组数据有数百个对象,数据结构类似于以下

var json = [{"id":"123","name":"user"},{"id":"124","name":"user2"},{"id":"125","name":"user4"}]

我正在使用以下函数创建dropdown使用此数据(ul和li)

var newhtml = $("<div/>");
json.forEach(function (e) {
  newhtml.append('<li>'+e.name+'</li>');
});
$('ul').append(newhtml.html());

这工作正常,但问题是如果json data接近千,它会减慢.我已经google了,发现了几种方法,其中包括:

• 避免追加li到ul每一次.所以我只在forEach循环后追加一次.它优化的东西不是那么多.

现在我的问题是如何使用优化方式使用json数据创建html？

Answer 1

如果直到最后才创建元素,速度会更快.首先创建原始HTML并最后生成元素.

var list = json.map(function(user){
  return '<li>' + user.name + '</li>';
});

$('<div/>').html( list.join('') ).appendTo('ul');

正如@Kannan J指出的那样,如果你跳过它,它会更快join.

var html = json.reduce(function(str, user){
  return str += '<li>' + user.name + '</li>';
}, '');

$('<div/>').html( html ).appendTo('ul');