单次重绘/重排中有多个DOM更新？

我有一个表填充了连接用户列表。 列表本身不会经常更改，但每行上的一个事情是每秒更新一次的计时器（hh：mm：ss）。 要更新计时器，我正在做这样的事情：

var curTime = new Date().getTime() / 1000; $('.timerCell').each(function(){ var $this = $(this); var initialTime = $this.data('sessionStartTimestamp'); // .data gets when the cell is dynamically created based on data received in an ajax request. $this.text(unixToHumanTime(curTime - initialTime)); }); 

我遇到的问题是：每次更新单个计时器单元时，都会触发重绘。 有没有办法告诉浏览器等待重绘？ 或者可能是将这些更新分组到单个更新中的某种方式。 我还想过每次更新时都重新渲染整个tbody，但是认为这可能比只更新单元格更加系统密集。

Answer 1

不要使用jQuery。 让我们手动创建一个文档片段并将其附加到DOM，这样我们就不会重新绘制。

 var curTime = new Date().getTime() / 1000; $('.timerCell').text(function(){ var elm = $(this).get(0); var frag = document.createDocumentFragment(); elem.removeChild(elem.childNodes[0]); frag.appendChild(document.createTextNode(unixToHumanTime(curTime - initialTime))); elem.appendChild(frag); }); 

Answer 2

试试这个：

 var curTime = new Date().getTime() / 1000; $('.timerCell').text(function(){ var initialTime = $(this).data('sessionStartTimestamp'); return unixToHumanTime(curTime - initialTime); }); 

许多jQuery方法允许您传递带有返回值的回调函数。 严格来说，这段代码仍在一次更新.timerCell ，但它的效率更高。