Oct 31, 2009

Javascript Dataset Speedup

I've been working on a little project and I noticed it was loading very very slowly when working with large datasets (large being ~6000 numbers, so it is "large"). After doing some digging, I realized that it was because I was rendering my objects as Javascript objects:
<%= @workspace.as_js %>
Since the objects had some very large arrays in them, it took quite some time for the browser to parse that Javascript and load it in.

However, the weird part was then when I'd use Javascript code to process these arrays once they were loaded, it was nice and speedy.

The solution was simple: don't put the objects as Javascript. Parsing it is slow.
Initially I decided I would put the data in some raw form inside a <div> and then process the innerHTML. However that also turned out to affect the rendering time of the page (surprise surprise).

My final solution was to load the data from an AJAX action. This way the rendering time of the page is snappy, and there is not a lot of Javascript to parse.

The raw format is pretty simple. It is a set of name-value pairs separated by pipes (|), and each element is separated by colons - as I write this it might make more sense to use a URL formatting with & and =. The datasets themselves are arrays, so the name is preceded by a @ and is stored in the vars subfield of the object that I'm loading in. Here's the code:
<script type = "text/javascript">
var workspace = {vars: {}};
$(function(){
$.get('data_set_url', {},
function(response){
$.each(response.split("|"), function(i, obj){
if (obj.substring(0, 1) == "@"){
// dataset
obj = obj.substring(1).split(":");

workspace.vars[obj[0]] = $.map(obj[1].split(","), function(obj2, i2){
return parseFloat(obj2);
});
}else{
obj = obj.split(":");
workspace[obj[0]] = obj[1];
}
});
}
);
});
</script>
Even with the AJAX, this turns out to be much faster than putting the data as Javascript (or JSON), or putting the raw data in the HTML.

No comments: