我正在尝试在表格中显示多个运行时间。 该表有 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 来操作表格。
有没有人知道如何提高我的表现?
亲切的问候 马努
最佳答案
一些想法:
- 使用对元素的直接引用而不是通过
$
访问它们肯定会有所帮助一直都是选择器。例如。使用$(live.childNodes[2])
而不是$("#" + live.Entry.Id + "_time")
,或存储对单个单元格的引用。然后你可以删除所有id
你的细胞的属性。 - 假设瓶颈是元素创建,您可以预先创建隐藏的表格行并在使用时显示它们,使用后再次隐藏它们。不过,这需要对这些函数进行重大重写。
- 我不确定有多少开销
$('<td>')
添加。也许document.createElement('td')
明显更快。 - (这实际上应该出现在每个与性能相关的更改的开头)分析您的代码,例如使用 Chrome 开发者工具中的配置文件选项卡。它会显示究竟花费了多少时间,以便您了解最昂贵的函数调用是什么。我认为即使在桌面上速度更快,在移动设备上最慢的东西在桌面上仍然是最慢的。
关于Javascript 秒表性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15196787/