Question

我想在表格中显示多个运行时间。该表有3列（nr，名称，时间）。时间以'hh：mm：ss.f'格式显示，这意味着我每100ms更新一次。

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

一些想法：

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

Javascript秒表性能

1 个答案: