存储使用Javascript大型阵列数据时的性能问题 [英] Performance concerns when storing data in large arrays with Javascript

问题描述

我有一个基于浏览器的可视化应用，在那里有个数据点的图形，存储为对象的数组：

I have a browser-based visualization app where there is a graph of data points, stored as an array of objects:

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

此图形是与D3和画布绘制可视化（见一个有趣的讨论这个问题）。它是交互式的，天秤可以改变很多，这意味着数据必须被重新绘制，而数组需要通过迭代相当频繁，尤其是动画缩放的时候。

This graph is being visualized with d3 and drawn on a canvas (see that question for an interesting discussion). It is interactive and the scales can change a lot, meaning the data has to be redrawn, and the array needs to be iterated through quite frequently, especially when animating zooms.

从我的后脑勺和阅读其他JavaScript的帖子，我有一个模糊的想法在Javascript中优化取消引用可能导致大的性能提升。 Firefox是上我的应用程序运行很慢（相比于IE9，Chrome浏览器和Safari）唯一的浏览器，它需要加以改进。因此，我想站稳，权威的答案如下：

From the back of my head and reading other Javascript posts, I have a vague idea that optimizing dereferences in Javascript can lead to big performance improvements. Firefox is the only browser on which my app runs really slow (compared to IE9, Chrome, and Safari) and it needs to be improved. Hence, I'd like to get a firm, authoritative answer the following:

慢得多怎么是这样的：

// 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规模的对象，它们是计算扩展的位置的功能。我提到的是，上述code可能需要运行每秒并能够滞后像火狐球 60帧以上。至于我可以看到，唯一的区别是数组指针引用VS对象访问。哪一个运行速度更快，区别显著？

xs and ys are d3 scale objects, they are functions that compute the scaled positions. I mentioned the above that the above code may need to run up to 60 frames per second and can lag like balls on Firefox. As far as I can see, the only differences are array dereferences vs object accessing. Which one runs faster and is the difference significant?

推荐答案

这是pretty不可能的，任何这些循环优化将使任何区别。 2000次通过循环像这样没有太大的。

It's pretty unlikely that any of these loop optimizations will make any difference. 2000 times through a loop like this is not much at all.

我倾向于怀疑执行慢在Firefox canvas.arc（）的可能性。你可以通过替换 canvas.lineTo（）通话，我所知道的是快速在Firefox，因为我在我的 polyGonzo 地图。该网页上的测试地图上的所有3199县观点来自3357多边形（部分县市有一个以上的多边形），共有33557点，它遍历了类似的帆布环路这些点中的每一个。

I tend to suspect the possibility of a slow implementation of canvas.arc() in Firefox. You could test this by substituting a canvas.lineTo() call which I know is fast in Firefox since I use it in my PolyGonzo maps. The "All 3199 Counties" view on the test map on that page draws 3357 polygons (some counties have more than one polygon) with a total of 33,557 points, and it loops through a similar canvas loop for every one of those points.

这篇关于存储使用Javascript大型阵列数据时的性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！