2

テーブルに複数の実行時間を表示しようとしています。テーブルには3つの列（nr、name、time）があります。時刻は「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を使用しています。

誰かが私のパフォーマンスを改善する方法を知っていますか？

よろしくマヌー

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 に答える