Question

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

1.每次收到.innerHTML

的交易时，我都会重写我的全部内容

我通过添加和删除节点来更新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>

动态更新DOM的不太可怕的方法

2 个答案: