动态更新DOM的方法不那么糟糕

Question

我正在iframe中创建一个小部件，一个websocket可以快速接收一些交易。我想在一个表格中显示websocket最近收到的10笔交易（例如）。什么是最好的方法（最优化的方法）：

1.每次收到交易时，我都会重写我的整个tbody。innerHTML

2. 我通过根据更新添加和删除节点来更新DOM（但这种情况也会发生很多次）

我只能使用纯javascript，没有库，jquery。。等我应该使用什么方法（最快、最简单…）？还有其他想法吗？

谢谢！

编辑：@Myst推荐了一些关于这个主题的有趣文档http://frontendbabel.info/articles/webpage-rendering-101/http://www.html5rocks.com/en/tutorials/speed/layers/

Answer 1

试着想象一种网格类型的结构，那么我的方法是：

• 为每个<td>小区分配一个唯一的ID
• 在JavaScript函数中，使用document.getElementById()获取对每个需要更新的单元格的引用
• 使用innerHTML更新这些单元格

使用id访问元素是最快的方式，使用.innerHTML更新也是最快的方法。

Answer 2

我认为如果没有更多细节，很难回答性能问题。我想答案取决于收到的交易数量与已经显示的交易数量的比较，以及显示新交易的成本。

这是我尝试只画收到的新交易（对不起，我不知道什么是交易）。我们可以使用repaintTrades来比较不同的选项：

var container = document.querySelector('#container'),
    queue = [],
    nbTradesToShow = 50,
    nbNewTrades = 80,
    _tradeId = 0,
    _tradeNames = ['hello', 'bonjour', 'guten Tag', 'hola', 'buongiorno']
function repaintTrades() {
  var firstToKeepIndex, i = 0
  queue = queue.slice(-nbTradesToShow)
  firstToKeepIndex = container.children.length + queue.length - nbTradesToShow
  while (i++ < firstToKeepIndex) 
    container.removeChild(container.firstElementChild)  
  // add new trades
  queue.forEach(createTradeRow)
  queue = []
}      
function receive(trades) {
  queue = queue.concat(trades)
  window.requestAnimationFrame(repaintTrades)  
}
function websocketTrades() {
  var nbTrades = Math.floor(Math.random() * nbNewTrades),
      i = 0,
      trades = []
  console.debug(nbTrades, ' trades will be created')
  while (i++ < nbTrades) trades.push({
    id: _tradeId++,
    name: _tradeNames[Math.floor(Math.random() * 5)]
  })
  setTimeout(websocketTrades, 1000)
  receive(trades)
}
function createTradeRow(trade) {
  var row = document.createElement('tr'),
      cellId = document.createElement('td'),
      cellName = document.createElement('td')
    cellId.textContent = trade.id
    cellName.textContent = trade.name
    row.appendChild(cellId)
    row.appendChild(cellName)
    container.appendChild(row)
}
websocketTrades()

table {
  border-collapse: collapse;
  margin: auto;
  width: 400px;
  text-align: center;
}
thead {
  font-weight: bold;
}
td {
  border: solid black 1px;
}

<table>
  <thead>
    <tr><td>id</td><td>name</td></tr>
  </thead>
  <tbody id="container">
     
  </tbody>
</table>