1回の再描画/リフローで複数のDOMアップデートが必要ですか？

Question

私は接続されたユーザーのリストが読み込まれるテーブルを持っています。リスト自体はあまり頻繁に変更されませんが、各行の1つは、1秒ごとに更新されるタイマー（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

はこれを試してみてください：

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

多くのjQueryのメソッドを使用すると、戻り値にコールバック関数を渡すことができます。厳密に言えば、このコードは一度に1つずつ.timerCellを更新していますが、これはもっと効率的です。

Answer 2

このために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); 
});