Run results for: Updating table as whole vs Updating particular cell

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36

Browser: Chrome 95

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Take count from element and update	104890.6 Ops/sec
Update whole table	29820.3 Ops/sec

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<table id='testTable'>
    <tbody>
        <tr id='countRow'>
            <td class='count'>0</td>
        </tr>
    </tbody>
</table>

Script Preparation code:

var $testTable = $("#testTable");

var count = 0;

function updateWhole() {
    $testTable.html("<tbody><tr id='countRow'><td class='count'>" + count + "h</td></tr></tbody>");
}

function updateCell() {
    var $elem = $("#countRow .count");
    var cnt = parseInt($elem.text() || 0);
    $elem.text(++cnt);
}

Tests:

Take count from element and update
updateCell();
Update whole table
count++; updateWhole();

Run results for: Updating table as whole vs Updating particular cell

Take count from element and update

Update whole table