javascript - 使用 Javascript 在大型数组中存储数据时的性能问题

Question

我有一个基于浏览器的可视化应用程序，其中有一个数据点图，存储为一个对象数组:

data = [
    {x: 0.4612451, y: 1.0511} , 
    ... etc
]

此图正在 visualized with d3 and drawn on a canvas (有关有趣的讨论，请参阅该问题)。它是交互式的，比例可能会发生很大变化，这意味着必须重新绘制数据，并且需要非常频繁地迭代数组，尤其是在动画缩放时。

从我的脑后和阅读其他 Javascript 帖子开始，我有一个模糊的想法，即优化 Javascript 中的取消引用可以带来巨大的性能改进。 Firefox 是唯一一个我的应用运行速度非常慢的浏览器(与 IE9、Chrome 和 Safari 相比)，它需要改进。因此，我希望得到一个坚定、权威的答复:

这慢了多少:

// data is an array of 2000 objects with {x, y} attributes
var n = data.length;
for (var i=0; i < n; i++) {
    var d = data[i];
    // Draw a circle at scaled values on canvas
    var cx = xs(d.x);
    var cy = ys(d.y);
    canvas.moveTo(cx, cy);
    canvas.arc(cx, cy, 2.5, 0, twopi);
}

与此相比:

// data_x and data_y are length 2000 arrays preprocessed once from data
var n = data_x.length;
for (var i=0; i < n; i++) {
    // Draw a circle at scaled values on canvas
    var cx = xs(data_x[i]);
    var cy = ys(data_y[i]);
    canvas.moveTo(cx, cy);
    canvas.arc(cx, cy, 2.5, 0, twopi);
}

xs 和 ys 是 d3 缩放对象，它们是计算缩放位置的函数。我在上面提到过，上面的代码可能需要每秒运行高达 60 帧，并且可能在 Firefox 上像球一样滞后。据我所知，唯一的区别是数组取消引用与对象访问。哪个运行得更快并且差异显着？

Answer 1

这些循环优化中的任何一个都不太可能产生任何影响。像这样循环 2000 次根本不算多。

我倾向于怀疑 Firefox 中 canvas.arc() 的执行速度可能很慢。您可以通过替换 canvas.lineTo() 调用来测试它，我知道它在 Firefox 中很快，因为我在我的 PolyGonzo 中使用了它。 map 。该页面上测试 map 上的“所有 3199 个县” View 绘制了 3357 个多边形(有些县有多个多边形)，总共有 33,557 个点，并且它为这些点中的每一个点循环了一个类似的 Canvas 循环。