多くのアニメーション要素を含むページでレンダリング速度に問題があります。 <table>（約500行）と、SSE経由で更新されたhtmlを読み込んで、既存の行の内容を更新プログラムで置き換えるJavaScriptのビットがあります。私がバックエンドをフルスピードで動作させると、ブラウザ（ChromeまたはWebKitGtk +）が絶対に鳴り響くので、毎秒約100回のアップデートに抑えました。このレートでは、ページは更新されますが、フレームレートは非常に低く、アニメーションは不規則です。JavaScriptを使用してHTML操作を高速化したり、アニメーションのレンダリング速度を向上させるにはどうすればよいですか？
パフォーマンスは、更新レートよりもテーブル内の行数の方がはるかに敏感です。たとえば、テーブルの行数を半分にすると、アニメーションは更新レートを半分にするよりもはるかにスムーズになります。
一般的なフレームレンダリングのChromeのタイムラインを見ると、HTML解析とDOM操作（約280 ms）と並行して、EventSourceの「メッセージ」リスナーへの呼び出しがたくさんあります。をお願いします。次に、「再計算スタイル」が50ms、「レイアウト」が113ms、「更新レイヤーツリー」が30ms、「ペイント」が30msで、すべてが並行して実行されています。
ページが更新されている間、CPUグラフは100％で1つのコアを表示しますが、その他は本質的にアイドルです。だから私は、WebKitがレイアウトなどを行うために単一のスレッドを使用していることを推測しています、そして、私はそのスレッドを過ぎ去っています。
ページ構造は基本的に次のとおりです。<tr>のidが行を検索するために使用される
<tr id = 'IBM'>
<td class='cond'>128</td>
<td class='exch'>*</td>
<td class='size'>1</td>
<td class='tickDown'>88.53<img class='arrow' src='quotes/DnArrow.png'/></td>
<td class='symb'>GPC</td>
<td class='tickDown'>102.66<img class='arrow' src='quotes/DnArrow.png'/></td>
<td class='size'>1</td>
<td class='exch'>*</td>
<td class='time'>02:13:24.455186</td>
</tr>
、および更新：
<html>
<body>
<div class='mainTable'>
<table id='mainTable' style="width:100%">
<thead><!-- header stuff --></thead>
<tbody>
<!-- About 500 <tr>s -->
</tbody>
</table>
</div>
<script src='quotes/tickUpd.js' type='text/javascript'></script>
</body>
</html>
〜500 <tr> Sのそれぞれは次のようになります一連の<td>が含まれています。 <img>は 'DnArrow'と 'UpArrow'（データは株価変動を表します）の間で変更されますが、クラス 'tickDown'を持つ<td>はそれと 'tickUp'の間でランダムに頻繁に変更されます。他のクラスは同じままです。
関連するスタイルは、次のとおりJavaScriptが
document.addEventListener("DOMContentLoaded",
function(event) {
var rows = document.getElementById('mainTable').rows;
new EventSource("/upd").addEventListener(
'message',
function(event) {
var update = JSON.parse(event.data);
var row = rows.namedItem(update.rowId);
row.innerHTML = update.html;
// Was previously: $("tr#"+update.rowId).html(update.html);
}
);
}
);
のように見えます
div.mainTable { width: 100%; font-size: 12px; columns: 32em; }
.symb { color: red; text-shadow: 1px 1px rgba(0, 0, 0, .6); }
@keyframes greenToBlack { from { background-color: #69BE28; } }
.tickUp { animation: greenToBlack 2s;color: white; }
@keyframes redToBlack { from { background-color: red; } }
.tickDown { animation: redToBlack 2s; color: white; }
@keyframes greenToRed { from { color: #69BE28; } to { color: red; } }
.symb { animation: greenToRed 30s; }
.arrow { vertical-align: middle; width: 5px; height: 5px; }
私は謙虚ブラウザから多くのことを求めている実現が、私はこれを作るために何かできることがありますもっと効率的？