Javascript秒錶性能

我試圖在表中顯示多個運行時間。該表有3列（nr，名稱，時間）。時間以'hh：mm：ss.f'格式顯示，這意味着我每100ms更新一次。Javascript秒錶性能

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); 
}

該代碼的工作原理和時間顯示爲「普通」個人電腦上的預期，我的問題是移動設備（手機）。似乎更新Intervall（100ms）對於大多數這些設備來說太快了，所以時間開始「跳躍」。如果我只更新現有表格元素的次數，那麼「跳躍」並不那麼困難，但是如果我添加表格行，它會變得越來越差，直到添加行。我使用JQuery來操作表格。

有沒有人有一個想法，我可以提高我的表現？

親切的問候馬努

來源

2013-03-04 Manuel Bleimuth

一些想法：

這肯定會有助於$選擇使用直接引用到你的元素，而不是訪問他們所有的時間。例如。使用$(live.childNodes[2])而不是$("#" + live.Entry.Id + "_time")，或者存儲對單個單元格的引用。然後，您可以刪除單元格的所有id屬性。
假設瓶頸是元素創建，您可以預先創建隱藏的表格行，並在使用後顯示它們，並在使用後再次隱藏它們。不過，這需要對這些功能進行重大改寫。
我不確定多少開銷$('<td>')增加。也許document.createElement('td')顯着更快。
（實際上這應該在每個與性能相關的更改開始時進行）對您的代碼進行剖析使用Chrome開發人員工具中的「配置文件」標籤。它會顯示花費了多少時間，以便知道最昂貴的函數調用是什麼。我認爲即使在桌面上速度更快，移動端最慢的情況在桌面上仍然是最慢的。

來源

2013-03-04 08:39:00

Javascript秒錶性能

回答

相關問題