2

我正在尝试在表格中显示多个运行时间。该表有 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 来操作表格。

有谁知道我可以如何提高我的表现？

亲切的问候马努

4

1 回答 1

0

一些想法：

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