Wednesday 15 August 2012

Performance concerns when storing data in large arrays with Javascript -


I have a browser-based visualization app, where a graph of the data points stored in the object's array:

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

This article (see an interesting discussion for that question) . It is interactive and scales can change a lot, which means that the data needs to be rebuilt, and the array will have to run again more often, especially when zoom has to be animated.

Reading other javascript posts from behind my head, I have a vague idea that optimizing the navigation in JavaScript can lead to large performance improvements. Firefox is the only browser on which my app actually operates at slow speed (compared to IE 9, Chrome and Safari) and should be improved. Therefore, I would like to get a firm, official answer:

How slow it is:

  // Data is an array of 2000 objects {X, y} Features var N = data.length; (Var i = 0; i & lt; n; i ++) for {var d = data [i]; // Create a circle on values ​​scaled on canvas var cx = xs (d.x); Var cy = ys (de); Canvas.moveTo (cx, cy); Canvas.arc (cx, cy, 2.5, 0, twopi); }   

Compared to:

  // data_x and data_y length 2000 arrays data var n = prefocessed from data_x.length; Create a circle on values ​​scaled on (var i = 0; i & lt; n; i ++) {// canvas var cx = xs (data_x [ii]); Var cy = ys (data_y [i]); Canvas.moveTo (cx, cy); Canvas.arc (cx, cy, 2.5, 0, twopi); }   

xs and ys are D3 scale objects, those are those that calculate the scaled positions I mentioned above That the above code can be run till 60 frames per second and can lag like balls on Firefox . As far as I can see, only the difference is against the array, so that the object can be used. Which one moves fast and the difference is important?

It is very unlikely that any of these loop optimizations make a difference 2000 times is not very much through the loop.

I suspect the possibility of slow execution of canvas.arc () in Firefox. You can test this by changing a canvas.lineTo () call while using it in your map that I know is fast in Firefox. "All 3199 counties" to see on the test map of that page, 3357 polygons (some counties have more than one polygon), with a total of 33,557 points, and it is a pivot through a similar canvas loop for all those points.

No comments:

Post a Comment