Javascript 秒表性能答案

【问题标题】：Javascript Stopwatch PerformanceJavascript 秒表性能
【发布时间】：2023-03-19 17:44:01
【问题描述】：

我正在尝试在表格中显示多个运行时间。该表有 3 列（编号、名称、时间）。时间以“hh:mm:ss.f”格式显示，这意味着我每 100 毫秒更新一次时间。

function updateTimes() {
    setTimeout(updateTimes, 100);
   // requestAnimationFrame(updateTimes);
    $("#livedata tbody tr").each(function (index, value) {
        var live = $(value).data("base");
        $("#" + live.Entry.Id + "_time").text(formatTimeF(moment().subtract(live.Data)));
    });
}

 //Create Table Row
function UpdateLive(live) {
    var e = $("#" + live.Entry.Id);

    if (e.length == 0) {
        e = $("<tr id='" + live.Entry.Id + "' class='live'/>");
    $("<td id='" + live.Entry.Id + "_name" + "'></td>").appendTo(e);
        $("<td id='" + live.Entry.Id + "_nr" + "'></td>").appendTo(e);
        $("<td id='" + live.Entry.Id + "_time" + "'></td>").appendTo(e);
        e.appendTo($("#livedata"));
    }
    e.data("base", live);
}

代码有效，时间在“普通”PC 上按预期显示，我的问题是移动设备（手机）。对于大多数这些设备来说，更新间隔（100ms）似乎太快了，所以时间开始“跳跃”。如果我只更新现有表格元素的时间，“跳跃”并不难，但如果我添加表格行，它会变得最糟糕，直到添加行。我使用 JQuery 来操作表格。

有人知道如何提高我的表现吗？

亲切的问候马努

【问题讨论】：

标签： javascript jquery performance stopwatch

【解决方案1】：

一些想法：

使用对元素的直接引用而不是一直通过$ 选择器访问它们肯定会有所帮助。例如。使用$(live.childNodes[2]) 而不是$("#" + live.Entry.Id + "_time")，或存储对单个单元格的引用。然后，您可以删除单元格的所有 id 属性。
假设瓶颈是元素创建，您可以提前创建隐藏的表格行，使用后显示，使用后再次隐藏。不过，这需要对这些函数进行重大改写。
我不确定$('<td>') 增加了多少开销。也许document.createElement('td') 明显更快。
（这实际上应该在每个与性能相关的更改的开头出现）配置您的代码，例如使用 Chrome 开发者工具中的配置文件选项卡。它将显示确切花费了多少时间，以便您知道最昂贵的函数调用是什么。我假设即使在桌面上速度更快，在移动设备上最慢的在桌面上仍然是最慢的。

【讨论】：