Javascript Производительность секундомера

Question

Я пытаюсь отобразить несколько рабочих столов в таблице. Таблица имеет 3 столбца (nr, имя, время). Время отображается в этом формате «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); 
} 

Код работает и отображается время, как ожидается, на «нормальных» ПК, моя проблема мобильные устройства (мобильные телефоны). Похоже, что обновление Intervall (100 мс) слишком быстро для большинства этих устройств, поэтому время начинает «прыгать». Если я только обновляю время существующих элементов таблицы, «прыжок» не так уж и трудный, но если я добавлю строки таблицы, это станет хуже, пока строка не будет добавлена. Я использую JQuery для управления таблицей.

У кого-нибудь есть идея, как я могу улучшить свою работу?

С наилучшими пожеланиями Manu

Answer 1

Некоторые идеи:

1. Это, безусловно, поможет использовать прямые ссылки на ваши элементы вместо того, чтобы доступ к ним с помощью $ селекторов все время. Например. используйте $(live.childNodes[2]) вместо $("#" + live.Entry.Id + "_time") или храните ссылки на отдельные ячейки. Затем вы можете отбросить все атрибуты id ваших ячеек.
2. Предполагая, что узким местом является создание элемента, вы можете заранее создать скрытые строки таблицы и показать их после их использования, спрятав их снова после использования. Однако для этого потребуется переписать эти функции.
3. Я не уверен, сколько накладных расходов $('<td>') добавляет. Может быть, document.createElement('td') значительно быстрее.
4. (и это должно наступить в начале каждого изменения, связанного с производительностью). Профилируйте свой код, например. используя вкладку «Профиль» в инструментах разработчика Chrome. Он покажет, где именно потрачено столько времени, чтобы вы знали, какие самые дорогие вызовы функций. Я бы предположил, что, даже если это будет быстрее на рабочем столе, то самое медленное на мобильном устройстве все равно будет медленнее на рабочем столе.