Javascript 秒表性能

Question

我正在尝试在表格中显示多个运行时间。该表有 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 上按预期显示，我的问题是移动设备(手机)。似乎更新 Intervall (100ms) 对于大多数这些设备来说太快了，所以时间开始“跳跃”。如果我只更新现有表格元素的时间，“跳跃”并不难，但如果我添加表格行，它会变得最糟糕，直到添加行。 我使用 JQuery 来操作表格。

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

亲切的问候 马努

Answer 1

一些想法:

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