Javascript эффективно создает таблицу из JSON и добавляет ее в DOM

Я предлагаю вам использовать DocumentFragment и использовать собственный javascript для такого рода массовых манипуляций DOM. Я подготовил пример, вы можете проверить его здесь.

var fragment = document.createDocumentFragment(),
    tr, td, i, il, key;
for(i=0,il=data.length;i<il;i++) {
    tr = document.createElement('tr');
    for(key in data[i]) {
        td = document.createElement('td');
        td.appendChild( document.createTextNode( data[i][key] ) );
        tr.appendChild( td );
    }
    fragment.appendChild( tr );
}
$('#mytable tbody').append( fragment );

Я думаю, что это самый быстрый способ сделать такую работу.

самое главное-создать все содержимое таблицы из DOM, а затем вставить в таблицу. Этот в chrome заканчивается примерно через 3 до 5 мс:

function createTableFromData(data) {
    var tableHtml = '';
    var currentRowHtml;
    for (var i = 0, length = data.length; i < length; i++) {
        currentRowHtml = '<tr><td>' + data[i].join('</td><td>') + '</td></tr>';
        tableHtml += currentRowHtml;        
    }  
    return tableHtml;    
}

var textToAppend= createTableFromData(yourData);
$('#myTable').append(textToAppend);

Если у вас есть строка проверки JSON с сервера, и структура надежно представляет собой массив массивов строк, приведенное ниже позволит вам избежать синтаксического анализа JSON и вместо этого заменить генерацию HTML постоянной серией операций регулярного выражения, которые, как правило, реализуются в собственном коде, использующем собственные буферы. Это должно полностью избежать одного синтаксического анализа и заменить любые буферные копии, которые стоят O(n**2) на K, O (n) буферные копии для константы k.

var jsonContent
    = ' [ [ "foo", "bar", "[baz\"boo\n]" ], ["1","2" , "3"] ] ';

var repls = {  // Equivalent inside a JSON string.
  ',': "\u002b",
  '[': "\u005b",
  ']': "\u005d"
};
var inStr = false;  // True if the char matched below is in a string.
// Make sure that all '[', ']', and ',' chars in JSON content are
// actual JSON punctuation by re-encoding those that appear in strings.
jsonContent = jsonContent.replace(/[\",\[\]]|\./g, function (m) {
  if (m.length === 1) {
    if (m === '"') {
      inStr = !inStr;
    } else if (inStr) {
      return repls[m];
    }
  }
  return m;
});

// Prevent XSS.
jsonContent = jsonContent.replace(/&/g, "&")
   .replace(/</g, "&lt;");
// Assumes that the JSON generator does not encode '<' as '\u003c'.

// Remove all string delimiters and space outside of strings.
var html = jsonContent
    .replace(/\"\s*([,\]])\s*\"?|\s*([\[,])\s*\"/g, "");
// Introduce the table header and footer.
html = html.replace(/^\s*\[/g, "<table>")
html = html.replace(/]\s*$/g, "</table>")
// Introduce row boundaries.
html = html.replace(/\],?/g, "</tr>")
html = html.replace(/\[/g, "<tr><td>")
// Introduce cell boundaries.
html = html.replace(/,/g, "<td>")

// Decode escape sequences.
var jsEscs = {
  '\n': '\n',
  '\f': '\f',
  '\r': '\r',
  '\t': '\t',
  '\v': '\x0c',
  '\b': '\b'
};
html = html.replace(/\(?:[^u]|u[0-9A-Fa-f]{4})/g, function (m) {
      if (m.length == 2) {
        // Second branch handles '\"' -> '"'
        return jsEscs[m] || m.substring(1);
      }
      return String.fromCharCode(parseInt(m.substring(2), 16));
    });

// Copy and paste with the below to see the literal content and the table.
var pre = document.createElement('pre');
pre.appendChild(document.createTextNode(html));
document.body.appendChild(pre);
var div = document.createElement('div');
div.innerHTML = html;
document.body.appendChild(div);

Это определенно возможно. Я не думаю, что конкатенация строк-это путь. В общем, кажется, что быстрее создавать элементы и манипулировать ими, когда они не прикреплены к основному DOM; поэтому сначала создайте всю таблицу, а затем добавьте ее. В простом javascript я думаю, что код ниже в основном то, что вы хотите достичь..

    //mock up the data (this will come from you AJAX call)..
    var data = [];
    for(var i = 0; i < 200; i++){
        var rowData = [];
        for(var j = 0; j < 10; j++){
            rowData.push("This is a string value");
        }
        data.push(rowData);
    }

    //create table..
    var table = document.createElement("table");
    for(var i = 0; i < data.length; i++){
        var rowData = data[i];
        var row = document.createElement("tr");
        for(var j = 0; j < rowData.length; j++){
            var cell = document.createElement("td");
            cell.innerHTML = rowData[j];
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
    //finally append the whole thing..
    document.body.appendChild(table);

когда я вставляю это в консоль в Safari, он запускается через