Question

I am writing a Sencha Touch app where user will download 5000 records in JSON format and it will populte Ext.List control with them. The app downloads records fine because I am just using JSON.parse(…) and then add this data to the list using local storage store.

When I try to view the list, the app crashes and on chrome it lags a lot. I thought may be there is something I am messing up with the code but when I tried a test on iOS safari with this fiddle http://jsfiddle.net/Z8GVm/1/, it is throwing Safari unresponsive. Ain’t I supposed to hold that much data in iOS safari with JavaScript? If this is true, I got a argument that web is still not mature for assuming it can do everything native app can do.

Try on chrome http://senchafiddle.com/#gxtZ9
Try on iOS safari http://jsfiddle.net/Z8GVm/1/

Answer 1

That’s likely too much data to process in a row without letting the browser have any cycles and the mobile browser thinks that the javascript has gone unresponsive. It even takes several seconds to process on my quad-core desktop.

You can break it into chunks and give the browser a breath (with a setTimeout) between each chunk like this. Demo here: http://jsfiddle.net/jfriend00/XFgAa/. Note, this is multiple times faster than your prior version that uses document.write() on every line because this accumulates an object’s worth of data and adds it all at once in one DOM operation so this new version has 1/27th the number of DOM operations.

function addBigData() {
    // populate big array
    var items = [], i;
    for (i = 0; i < 5000; i++) {
        var data = {};
        for (var j = 1; j <= 8; j++) {
            data["prop" + j] = "Some Big Data " + j;
        }

        var item = {};
        item.data = data;

        items.push(item);
    }

    i = 0;
    function addNextChunk() {
        var chunkEnd = Math.min(i + 20, items.length);
        var chunk = [], item;
        while (i < chunkEnd) {
            item = items[i++];
            chunk.push("Item " + i);
            chunk.push("<br />");
            for (var prop in item.data) {
                chunk.push("&nbsp;&nbsp;&nbsp;");
                chunk.push(prop + " = " + item.data[prop]);
                chunk.push("<br />");
            }

            chunk.push("<br /><br />");
        }
        var div = document.createElement("div");
        div.innerHTML = chunk.join("");
        document.body.appendChild(div);
        if (i < items.length) {
            setTimeout(addNextChunk, 1);
        }
    }

    addNextChunk();
}

addBigData();

FYI, in a mobile browser you will hit some limits with available memory or local storage much sooner than you do with a desktop browser so you really shouldn’t be putting giant amounts of data into a page or even into local storage.