9

I have a (GIS) project which displays large amounts of customer data (Thousands of records) to clients. Where nescessary/possible/required, we use server side pagination/filtering/data manipulation but there are cases where it is most efficient to send the data in JSON format to the client and let their browser do the filtering.

The amount of data is large, so we format it to save on bandwidth and parsing time - instead of individual objects, we send a structure that includes the attribute names first and then the values in a single flat array. On the client, we rebuild this into more traditional json objects before other processing occurs. eg:

{attrNames:["foo","bar"],values:[1,2,3,4,...]) -> [{foo:1,bar:2},{foo:3,bar:4},...]

The code for doing this looks a little like this:

function toObjectArray(attrNames, values){
    var ret = [];
    var index = 0;
    var numAttrNames = attrNames.length;
    var numValues = values.length;
    while(index < numValues){
        var obj = {};
        for(var a = 0; a < numAttrNames; a++){
            obj[attrNames[a]] = values[index++];
        }
        ret.push(obj);
    }
    return ret;
}

Given that the attributes may change depending on the customer data, is there a way to do this translation that takes advantage of hidden classes in modern javascript engines like V8? I have done some micro benchmarks similar to our use case ( http://jsfiddle.net/N6CrK/1/ ) where working with json such that hidden classes are used is orders of magnitude faster than building the objects as above. I can get some of this boost using "eval" to create objects, but this feels ugly (This is demonstrated in the js fiddle). Is there a better way? Perhaps using some variant of Object.create, or something like it?

5
  • Using new Function("") rather than eval seems to boost the performance a little. jsfiddle.net/N6CrK/2
    – tofarr
    May 21, 2014 at 10:51
  • 1
    What kind of data do you really have ? Using TypedArrays is generally a lot faster and avoids parsing data, but it requires a completely different approach and it's not easily applicable to strings. May 22, 2014 at 9:43
  • The data is a selection of features for a geographical map, including their geometry and attributes, which will be filtered and styled on the client and then rendered using the canvas API. It is currently transmitted as JSON (in a compressed format a little bit more complex than that described) or as raster tiles, though if a binary format offers better performance our architecture is flexible enough to include it and I would be open to trying it - I had not bothered before because I figured I would not be able to top the performance of the browsers native JSON parser.
    – tofarr
    May 22, 2014 at 12:20
  • 1
    Another solution (probably easier to maintain) could be to use a WebWorker to parse the data. That will not speed up the process, but avoids the browser to be blocked during it. The only problem is that it could take additional time to re-transfer the result to the main thread (not sure about it). May 22, 2014 at 12:35
  • 1
    Well not an answer to your question, but, what about defining like {foo:[1,3,…],bar:[2,4,…]} and accessing like obj.foo[ix] instead of obj[ix].foo. This may prevent you from parsing and will save b/w.
    – dereli
    May 23, 2014 at 3:40

3 Answers 3

2

You mean something like this right?

function toHiddenObjectArray(attrNames, attrValues){

    var numAttrNames = attrNames.length,
        numValues = attrValues.length;

    function Data( values ) {
        for(var v = 0; v < numAttrNames; v++) {
            this[attrNames[v]] = values[v];
        }
    }

    var ret=[];
    for( var i=0; i<numValues ; i+=numAttrNames ) {
        ret.push( new Data( attrValues.slice(i,i+numAttrNames) ) );
    }

    return ret;
}

You can check our the fiddle here: http://jsfiddle.net/B2Bfs/ (With some comparison code). It should use the same "Hidden Class" (i.e. Data). Not sure how much quicker it is though!

But, if you really want to make your code none blocking, why not load the page, then request the data via AJAX, then run all you code when you get a response.

1

I can get some of this boost using "eval" to create objects, but this feels ugly

There's a less ugly way using the Function constructor. Also, further optimisations can be done by immediately assigning the values to the properties, instead of initialising them with null and then again iterating through the attrs array like the adHoc does it. You'd just pass each of the rows you get in the response (array? string? byte-whatever?) as a parameter to the factory.

Also I've moved the creation of the factory function out of the create function, so that only one function will be instantiated (and optimized after enough calls to it).
A decent amount of the time in your test loop is spent on the getTotal, so I've optimised this in a similar manner. Not using getTotalAdHoc in testing the optimised solution drastically reduces the measured time (you can test with getTotalOptimum as well).

var factory = new Function("arr", "return{"+attrs.map(function(n, i){
    return n+":arr["+i+"]";
}).join(",")+"};");
var getSum = new Function("o","return "+attrs.map(function(n, i){
    return "o."+n;
}).join("+")+";");

(updated jsfiddle)

I haven't yet tried moving the complete loop into the generated code, which could avoid a few function calls, but I don't think this is necessary.

1
  • Excellent answer, but I have noted that Function is quite a bit slower than eval in chrome for some reason.
    – tofarr
    May 26, 2014 at 10:03
1

For some reason I just recalled this question... and I just came up with a solution that is way dirtier than using eval but which causes a huge speed boost. The downside of it is that code will be similarly little maintainable as when using eval.

The basic idea is: When receiving the attribute names, generate the function code to parse the following data in JavaScript and add it in a <script> tag to the <head>.

Yeah, isn't that dirty? :-)

If performance is so critical for you, it will definitely help you... here's a modified version of your microbenchmak that proves it: http://jsfiddle.net/N6CrK/17/


Some remarks on the code...

The two functions createWithGeneratedFunction and getTotalWithGeneratedFunction are simply wrapper functions that can be used by productive code. All they do is make sure that the <script> with the generated functions is set up and then call it.

function createWithGeneratedFunction(numValues){
    makeSureScriptsAreSetUp()
    return createWithGeneratedFunctionAdded(numValues);
}

function getTotalWithGeneratedFunction(objs){
    makeSureScriptsAreSetUp()
    return getTotalWithGeneratedFunctionAdded(objs);
}

The actual workhorse is the makeSureScriptsAreSetUp with the functions it creates. I'll go through it line by line:

function makeSureScriptsAreSetUp() {
    if(scriptIsSetUp)
        return;

If the required <script> tag was already set up this function will directly return since there is nothing to do for it anymore.

    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    var theFunctions = "";

This prepares the creation of the required functions. The theFunctions variable will be filled with the code that is going to be put into the <script> tag content.

    theFunctions = 
        "function createWithGeneratedFunctionAdded(numValues) {" +
        "    var ret = [];" +
        "    var value = 0;" +
        "    for(var i = numValues; i-- > 0;) {" +
        "        ret.push({";
    for(var attr in attrs) {
        theFunctions +=
        "            " + attrs[attr] + ": value++,";
    }
    theFunctions +=
        "        });" +
        "    }" +
        "    return ret;" +
        "}" +
        "";

This completes the code for the parsing function. Obviously it just "parses" the numbers 0 to numValues in this microbenchmark. But replacing value++ with something like TheObjectThatTheClientSentMe.values[value++] should bring you very close to what you outlined in your question. (Obviously it would make quite a lot of sense to rename value to index then.)

    theFunctions +=
        "function getTotalWithGeneratedFunctionAdded(objs) {" +
        "    var ret = 0;" +
        "    for(var i = objs.length; i-- > 0;) {" +
        "        var obj = objs[i];" +
        "        ret += 0";
    for(var attr in attrs) {
        theFunctions +=
        "            + obj." + attrs[attr];
    }
    theFunctions +=
        "        ;" +
        "    }" +
        "    return ret;" +
        "}";

This completes the code for the processing function. Since you seem to require several processing functions, especially this code could become somewhat ugly to write and maintain.

    script.text = theFunctions;
    head.appendChild(script);
    scriptIsSetUp = true;
}

In the very end we simply set the <script> tag content to the code we just created. By then adding that tag to the <head>, Chrome's hidden class magic will occur and will make the code VERY fast.


Concerning extensibility: If you have to query different attribute/value sets from the server on the same page, you might want to give each parsing/processing method set unique names. For example, if you first receive attrs = ["foo","bar"] and next attrs = ["foo","bar","baz"] you could concat the underscore-joined attribute name array to the generated function names.

For example, instead of using createWithGeneratedFunctionAdded you could use createWithGeneratedFunctionAdded_foo_bar for the first attribute/value set and createWithGeneratedFunctionAdded_foo_bar_baz for the second attribute/value set. An attr parameter could then be added to the wrapper functions that will be used to generate the correct code line for an eval (yes, here the evil eval would return) to trigger the correct generated function. Obviously, the attr parameter would also be required for the makeSureScriptsAreSetUp function.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.