What's the most JSON you can reasonably expect to decode on the client side

Question

This morning I tried to use ExtJS' JSON decoding facilities against 0.75MB of data, and it crashed FF3. I'm wondering what is the most JSON one can reasonably expect to decode on the client side? This could be using ExtJS, jQuery, other Javascript frameworks or any built-in decoding that Javascript itself may offer.

Answer 1

I had this problem with YUI's JSON parser, so I tried Prototype's JSON parser for large datasets and found it worked a lot better. I also found that once datasets got to a certain size, they took too long to parse, and the browser would give a message asking if you want to terminate the job. So for large datasets, it might be worth splitting them up into smaller chunks that are easier to digest.

Answer 2

This depends largely on the client browser, as Chrome would have no problem with something that large, while IE6 would most likely stop to a halt on the spot.

I'd recommend that instead of a large 750 KB JSON transmission that you'd have to decode at once, try to send smaller (100 KB) messages on the background and requesting/showing the part of the data that the client needs first. That way your page will feel faster. Always try to load on demand large datasets.

My gut feeling is that the problem wasn't with the size of the JSON message anyway, but rather with ExtJS' JSON implementation in FF.

Have you tried this in other browsers? If this happens only on FF, I'd recommend try and use Firefox's own JSON interface to do the decoding and see if that works.

Also, have you checked that the JSON response is actually correct? It could be crashing the JSON parser.

Answer 3

As it turns out Firebug was the culprit. With it turned off, both Ext.util.JSON.decode and Javascript's native eval() function are returning in 0.15 seconds.

With Firebug on though eval returns in 0.3 whereas I finally got Ext.util.JSON.decode to finish with Firebug on and it took 60+ seconds!! I definitely need Firebug on during development.

Answer 4

This is interesting since Ext simply uses native browser JSON parsing if supported by the browser, else it evals the JSON. There's no manual parsing of any kind, so not sure how that would be affected by Firebug. One thing you might try, check the value of Ext.USE_NATIVE_JSON just before your parsing logic (should be true if you are using FF 3.1+, else will be false). Try setting that to the opposite value and see if that changes anything (again, not sure why it would, but worth trying to see if there is some difference in your case).

BTW, that's an awful lot of JSON... ;)