大数据集

Question

我有一个用于存储数字（大小为1000或更大）的大数组，这个数组值将用于实时渲染y轴线图。

我将不断unshift此数组添加新数据，pop删除数组中的最后一个数据。此操作允许我的图形从左向右移动。

然而，unshift和pop的这种方法很简单，但是当我的数组大小增加时，它会导致内存碎片和时间性能，并且我可以有多个图形，（第n个图形）并且每个都包含一个大数组）。我可以知道有没有更好的方法来进行这项操作？

Answer 1

我很好奇地测量了对传统的同记忆复制的移位/推动，结果很清楚，没有必要进行优化。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这个问题有两个方面：

有没有更好的方法来执行此操作？

这在很大程度上取决于你如何绘制图形。你是否使用某种类型的库？如果是这样，它可能需要一个特定的数据（例如数组），所以你可以做的不多。另一方面，如果您自己实施绘图部分，那么您可以使用您想要的任何数据结构（包括可能适合的列表）。

内存碎片和Array性能

首先问问自己一个问题：您在Array操作中确实遇到任何性能问题，或者这只是理论上的问题吗？

绘制图形比任何数组操作都要耗费时间。我认为你不应该担心Array方法的表现，除非你真的遇到任何问题。请注意，JS引擎Array中的不一定是作为数组实现的。它们可能是二叉搜索树甚至是其他东西，具体取决于您如何使用它们，因此很难预测哪种优化对您的情况有效，哪些会使事情变得更糟。

有没有办法提高性能？

是。但这取决于你如何实际使用该阵列。我可以想象，如果你绘制一个实时图表和unshift / pop数据，例如。每1秒，您确切地知道数组的length是正确的吗？它应该保持不变。因此，您可以做的一件事就是在开始时为该长度的数组分配内存。如果你将来unshift + pop，你的记忆力不应该分散，因为这是引擎优化的一个简单案例。但话说回来，只是猜测，因为 JavaScript引擎比我更聪明。文章Let’s get those Javascript Arrays to work fast中描述了更多提示和技巧。

不要试图修复那些没有破坏的东西。在开始重构之前测量并且不要过度思考。这称为过早优化，我很肯定在实际运行应用程序时，Array操作不会优先进行优化。