ビッグデータセットのJavascript配列unshiftおよびpop操作

Question

大きな配列を使用して数値（1000以上のサイズ）を格納する場合、この配列値はy軸線グラフをリアルタイムで描画するために使用されます。

私は常にunshiftこの配列を新しいデータを追加し、pop配列の最後のデータを削除します。この操作により、グラフは左から右に移動できます。

ただし、この方法は簡単ですが、配列サイズが大きくなり、グラフが1つ以上ある場合は、アレイ）。この操作を行うためのより良い方法があることは知っていますか？

Answer 1

この問題の二つの側面があります。

は、この操作を行うに任意のより良い方法はありますか？

どのようにグラフを描画するかによって大きく異なります。あなたはそれのために何らかのライブラリを使いますか？もしそうなら、おそらく特定のデータ（例えば、配列）を期待しているので、それについてはあまりできません。一方、あなた自身で描画部分を実装している場合は、必要な任意のデータ構造（ここで適切なリストを含む）を使用することができます。

メモリの断片化とArrayパフォーマンス

すべての最初の質問を自問してください：あなたが実際にArray操作で任意のパフォーマンスの問題を持っているか、これは単なる理論であるのですか？

グラフの描画は、どのアレイ操作よりもはるかに時間がかかります。私は実際に問題がなければ、Arrayメソッドのパフォーマンスについて心配するべきではないと思います。 JSエンジンでがArrayであるということは必ずしも配列として実装されているとは限りません。バイナリ検索ツリーやそれを使用する方法によっては、バイナリ検索ツリーやその他のものでもあります。したがって、どの最適化があなたのケースでうまくいくかを予測するのは難しく、状況を悪化させます。

パフォーマンスを向上させる方法はありますか？

はい。しかし、どのように実際に配列を使用するかによって異なります。ライブグラフを描くと想像できます。unshift/popデータなどです。 1秒ごとに正確に配列のlengthを知っていますか？それは一定のままでなければなりません。したがって、最初に行うことのできることの1つは、その長さの配列にメモリを割り当てることです。エンジンで最適化するのは簡単なケースなので、将来はunshift + popを実行すると、メモリが断片化することはありません。しかし、もう一度、それはちょうど推測です。JavaScriptエンジンは私がよりスマートです。より多くのヒントとテクニックは、記事Let’s get those Javascript Arrays to work fastに記載されています。

壊れていないものを修正しようとしないでください。リファクタリングを開始する前に測定し、あまりにも詳しく考える必要はありません。これは時期尚早の最適化と呼ばれ、実際にアプリケーションを実行しているときに配列操作で最適化することは重要ではないということは肯定的です。

Answer 2

私は従来の同じメモリのコピーに対してシフト/プッシュを測定するのに不思議で、結果はかなり明確であり、最適化は必要ありません。

var p = [], q = []; 
 
for (var i = 0; i < 10000; i++) p[i] = i; 
 
for (var i = 0; i < 10000; i++) q[i] = i; 
 

 
function rotate_1(a, x) { 
 
    var len = a.length; 
 
    for (var i = 1; i < len; i++) 
 
    a[i - 1] = a[i]; 
 
    a[len - 1] = x; 
 
} 
 

 
function rotate_2(a, x) { 
 
    a.shift(); 
 
    a.push(x); 
 
} 
 

 
t = new Date() 
 
for (var i = 0; i < 100000; i++) rotate_1(p, i); 
 
document.write("copy="); 
 
document.write(new Date() - t); 
 
document.write("<br>"); 
 

 
t = new Date() 
 
for (var i = 0; i < 100000; i++) rotate_2(q, i); 
 
document.write("shift/push="); 
 
document.write(new Date() - t); 
 
document.write("<br>");