Javascript 有效地从 JSON 构建表并将其添加到 DOM

Question

我有一个来自服务器的 JSON 数组，其中包含 200 个对象的数组，每个对象包含另外 10 个我想以表格格式显示的对象。起初，我为每次迭代创建一个<tr>，并使用jQuery 将一个从数组值构建的<td> 附加到<tr>。这在 Chrome 中大约需要 30 秒，在 IE 8 中大约需要 19 秒。这花费的时间太长，所以我尝试切换到 Array.join() 方法，在该方法中，我将构成整个表的每个字符串存储在一个数组中，并在最后做$('#myTable').append(textToAppend)。这实际上比我的第一个版本差了大约 5 秒。

我希望将其缩短到 10 秒左右。我有机会吗？如果没有，我只会一次添加一行，但我不想那样做。

for(allIndex = 0; allIndex < entries.alumnus.length; allIndex++){

  var entry = '<tr id="entry' + allIndex + '" class="entry"></tr>';
  $('#content_table').append(entry);

  $('#entry' + allIndex).append(($.trim(entries.alumnus[allIndex].title) != '' ?
        '<td id="title' + allIndex + '" class="cell"><span class="content">' +
         entries.alumnus[allIndex].title + '</span></td>' : '<td width="5%">' + 
         filler + '</td>'));    
  .
  .
  .
  .//REST OF ELEMENTS
  .
  .
  .
}   

更新：我昨天一定搞砸了，因为我回去尝试从 DOM 中附加元素，然后稍后附加它们，而不使用 jQuery，我已经把时间花在了Chrome 为 85 毫秒，IE7 为 450 毫秒！！！你们真棒！！！我给了 user1 答案，因为那个更全面，并且在 Chrome 中使用片段并没有真正改变我的时间，在 IE7 中增加了大约 20 毫秒。但我仍然很欣赏@Emre Erkan 的回答，并且会更频繁地使用:)

Answer 1

如果您有来自服务器的 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, "$1$2");
// 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);

Answer 2

我建议你使用DocumentFragment 并使用原生javascript 来进行这种大规模的DOM 操作。我准备了一个例子，你可以查看here。

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 );

我认为这是完成这项工作的最快方法。

Answer 3

最快的看起来像这样：

var oldTable = document.getElementById('example'),
    newTable = oldTable.cloneNode(true);
for(var i = 0; i < json_example.length; i++){
    var tr = document.createElement('tr');
    for(var j = 0; j < json_example[i].length; j++){
        var td = document.createElement('td');
        td.appendChild(document.createTextNode(json_example[i][j]));
        tr.appendChild(td);
    }
    newTable.appendChild(tr);
}

oldTable.parentNode.replaceChild(newTable, oldTable);

并且应该以毫秒为单位运行。这是一个示例：http://jsfiddle.net/Paulpro/YhQEC/ 它创建了 200 个表行，每个行包含 10 个 td。

您希望使用元素而不是字符串进行附加，但在创建整个结构之前不希望向 DOM 附加任何内容（以避免循环中的重排）。因此，您可以克隆原始表并附加到克隆，然后在循环完成后插入克隆。

通过避免使用 jQuery 并直接与 DOM 交互，您还将获得相当多的速度。

您的代码可能如下所示：

var oldTable = document.getElementById('content_table'),
    newTable = oldTable.cloneNode(true),
    tr, td;
for(var i = 0; i < entries.alumnus.length.length; i++){
    tr = document.createElement('tr');
    tr.id = 'entry' + i;
    tr.className = 'entry';

    if(entries.alumnus[i].title){
        td = document.createElement('td');
        td.id = 'title' + i;
        td.className = 'cell';
        var span = document.createElement('span');
        span.className = 'content';
        span.appendChild(document.createTextNode(entries.alumnus[i].title);
        td.appendChild(span);
        tr.appendChild(td);
        tr.appendChild(createFiller(filler));
    }

    // REST OF ELEMENTS

    newTable.appendChild(tr);

}

oldTable.parentNode.replaceChild(newTable, oldTable);

function createFiller(filler){
    var td = document.createElement('td');
    td.style.width = '5%';
    td.appendChild(document.createTextNode(filler);
    return td;
}

Answer 4

最重要的是从 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);

Answer 5

这绝对是可行的。我不认为字符串连接是要走的路。一般来说，当元素没有附加到主 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 的控制台时，它会在