Лучший способ построить HTML из JSON

Question

Я пытаюсь создать POC для переноса тяжелого JSF-приложения в ajax / restful-приложение без сохранения состояния. В процессе я не могу решить, каков наилучший способ представления данных JSON, возвращаемых на экран, я вижу 2 основных подхода: один - иметь шаблоны и использовать с ними что-то вроде toHTML () прототипа, а другой - создавать объекты в javascript, а затем использовать appendchild. первый гораздо легче понять для нового человека, который должен поддерживать код, так как шаблоны очень понятны и просты в обслуживании (также навыки, необходимые для изменения HTML в шаблонах, ниже), но из того, что я понимаю, appendchild метод лучше в отношении скорости браузера.

Каков предпочтительный способ справиться с этим, и я пропускаю другие точки сравнения между этими двумя? добавьте ребенка это хороший компромисс между ними? Есть ли другие способы сделать это?
P.S: чтобы быть ясным, я говорю только о клиентских манипуляциях

Answer 1

Установка html напрямую с помощью innerHTML - самый быстрый способ кроссбраузерности.Он имеет некоторые ошибки , однако вам следует помнить (таблицы, формы и т. Д.).

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() {
  // ...
});