Question

我有大约10,000行要渲染。我读到使用文档片段是创建文档元素并将它们附加到DOM的最有效方法，因为文档片段不会在您追加时触发布局的回流。原则上这听起来不错，但我的UI锁定了大约10秒，同时元素被添加到片段中。

我目前的代码：

var frag = document.createDocumentFragment();

for( var bay_name in self.results )
{
  if( locations = self.results[bay_name] )
  {
    locations.forEach( function( location )
    {
      var volume      = parseFloat( location['volume'] ).toFixed(5);
      var node        = document.createElement('tr');

      node.innerHTML += '<td>' + location['product_id'] + '</td>';
      node.innerHTML += '<td>' + location['length'] + '</td>';
      node.innerHTML += '<td>' + location['width'] + '</td>';
      node.innerHTML += '<td>' + location['height'] + '</td>';
      node.innerHTML += '<td>' + volume + '</td>';
      node.innerHTML += '<td>' + location['stock'] + '</td>';

      frag.appendChild( node );
    });
  }
}

self.data_container.appendChild( frag );

我认为事情滞后的原因是因为createElement正在为表中的每一行在内存中设置一个新节点，但如果我移动var node = ...我在哪里构建了frag它只会附加一个表格的节点。

我在这里做了一些根本错误的事吗？

如何有效地构建文档片段

0 个答案: