javascript - 从 json 构建 HTML 的最佳方法

Question

我正在尝试构建一个 POC，以将重型 JSF 应用程序迁移到无状态 ajax/restful 应用程序。在这个过程中，我无法决定呈现返回到屏幕的 JSON 数据的最佳方式是什么，我可以看到两种主要方法，一种是使用模板并使用类似原型(prototype)的 toHTML() 之类的东西，另一种是构建javascript 中的对象，然后使用appendchild。对于必须维护代码的新手来说，第一个更容易理解，因为模板非常清晰且更易于维护(而且更改模板中的 html 所需的技能较低)，但据我了解，appendchild就浏览器速度而言，该方法更好。

处理这个问题的最佳方法是什么？我是否缺少两者之间的其他比较点？ append child这是两者之间的一个很好的妥协吗？还有其他方法可以做到这一点吗？
P.S:需要明确的是，我只是在谈论客户端操作

Answer 1

直接用设置html innerHTML is the fastest 方式跨浏览器。它有some bugs ，但是，您应该记住这一点(表格、表单等)。

var html = [];

for (...) {
  html.push( PARTIAL_HTML );
}

element.innerHTML = html.join("");

<小时/>

更新:最好的方法可能是亲自测试:

function test( name, fn, n, next ) {

  var n = n || 100; // default number of runs
  var start, end, elapsed;

  setTimeout(function() { 
    start = Number(new Date());   
    for ( ; n--; ) {
      fn() 
    }
    end = Number(new Date());

    elapsed = end - start;

    // LOG THE RESULT
    // can be: $("#debug").html(name + ": " +  elapsed + " ms");
    console.log(name + ": " +  elapsed + " ms")); 

    next && next();
  }, 0);
}

test("dom", function() {
  // ...
});

test("innerHTML", function() {
  // ...
});