Javascript 在一次重画/回流中进行多个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，但我认为这可能比只更新单元格更需要系统。

试试以下方法：

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

---

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

不要为此使用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);
});

---

你是说每秒钟所有的计时器都会触发一次重画我以为我遇到的滚动延迟是由所有这些重画造成的，但事实证明，这是因为单元格上有动画框阴影（使它们根据时间发出不同的颜色）避免所有这些重绘仍然会对性能有好处，但这不再那么重要，因为这不是真正的问题。通过创建文档片段，我们只会导致每次重绘片段，而不是整个文档。但正如他在评论中解释的那样，他的问题是由盒子阴影引起的，而不是过度的回流