Question

I am trying to write an app that will work online and offline using technologies such as application cache and local storage. I am using jQuery mobile and an jqm autocomplete solution which can be found here http://andymatthews.net/code/autocomplete/

The idea is that if the app is on-line then I will be calling a remotely accessible function via ajax which will set data. The ajax calls that are made bring back data for events, countries and hospitals. Once the data as been returned I am setting the data in localStorage.

If the data already exists in localStorage then I can continue while being offline as I don’t have to rely on the ajax calls.

I am having performance issues with this code when running on iPad/mobile devices. Where the hospital data is concerned. There is a large amount of data being returned for hospitals, please see sample of JSON for hospital data below. It can be a little slow on desktop but not nearly as bad.

Can anyone see any improvements to the code I have below to increase the performance.

JSON hospital data example

{ "hospitals" : { 
  "1" : { "country" : "AD",
      "label" : "CAIXA ANDORRANA SEGURETAT SOCIAL"
    },
  "10" : { "country" : "AE",
      "label" : "Advance Intl Pharmaceuticals"
    },
  "100" : { "country" : "AT",
      "label" : "BIO-KLIMA"
    },
  "1000" : { "country" : "BE",
      "label" : "Seulin Nicolas SPRL"
    },
  "10000" : { "country" : "ES",
      "label" : "Dental 3"
    },
  "10001" : { "country" : "ES",
      "label" : "PROTESIS DENTAL MACHUCA PULIDO"
    },
  "10002" : { "country" : "ES",
      "label" : "JUST IMPLANTS, S.L."
    },
  "10003" : { "country" : "ES",
      "label" : "CTRO DENTAL AGRIC ONUBENSE DR.DAMIA"
    },
  "10004" : { "country" : "ES",
      "label" : "HTAL. VIRGEN DE ALTAGRACIA"
    },
  "10005" : { "country" : "ES",
      "label" : "HOSPITAL INFANTA CRISTINA"
    }....


/*global document,localStorage,alert,navigator: false, console: false, $: false */

$(document).ready(function () {
//ECMAScript 5 - It catches some common coding bloopers, throwing exceptions. http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
//It prevents, or throws errors, when relatively "unsafe" actions are taken (such as gaining access to the global object).
//It prevents, or throws errors, when relatively "unsafe" actions are taken (such as gaining access to the global object).
"use strict";

//initialise online/offline workflow variables
var continueWorkingOnline, continueWorkingOffline, availableEvents, availableHospitals, availableCountries, availableCities;
continueWorkingOnline = navigator.onLine;

var getLocalItems = function () {

    var localItems = [];    
    availableEvents = localStorage.getItem('eventData');
    availableHospitals = localStorage.getItem('hospitalData');
    availableCountries = localStorage.getItem('countryData');

    if (availableEvents) {
        //only create the array if availableEvents exists
        localItems[0] = [];
        localItems[0].push(availableEvents);
    }
    if (availableCountries) {
        //only create the array if availableCountries exists
        localItems[1] = [];
        localItems[1].push(availableCountries);
    }
    if (availableHospitals) {
        //only create the array if availableHospitals exists
        localItems[2] = [];
        localItems[2].push(availableHospitals);
    }
    if (availableCities) {
        //only create the array if availableHospitals exists
        localItems[3] = [];
        localItems[3].push(availableCities);
    }
    return localItems;              
};


//Check to see if there are 3 local items. Events, Countries, Cities. If true we know we can still run page off line
continueWorkingOffline = getLocalItems().length === 3  ? true: false; 

//Does what is says on the tin
var populateEventsDropDown = function (data) {      
    var eventsDropDown = $('#eventSelection');

    var item = data.events;
    $.each(item, function (i) {
        eventsDropDown.append($('<option></option>').val(item[i].id).html(item[i].name));
    });
};

//Called once getData's success call back is fired
var setFormData = function setData(data, storageName) {
    //localStorage.setItem(storageName, data);
    localStorage.setItem(storageName, data);
};

//This function is only called if continueWorkingOnline === true
var getRemoteFormData = function getData(ajaxURL, storageName) {
    $.ajax({
        url: ajaxURL,
        type: "POST",
        data: '',
        success: function (data) {
            setFormData(data, storageName);             
        }           
    });
};

//Function for autoComplete on Hospital data
var autoCompleteDataHospitals = function (sourceData) {

    var domID = '#hospitalSearchField';
    var country = $('#hiddenCountryID').val();

    var items = $.map(sourceData, function (obj) { 
        if (obj.country === country) {
            return obj;
        } 
    });     

    $(domID).autocomplete({
        target: $('#hospitalSuggestions'),
        source: items,
        callback: function (e) {
            var $a = $(e.currentTarget);
            $(domID).val($a.data('autocomplete').label);                                        
            $(domID).autocomplete('clear');
        }
    });
};  

//Function for autoComplete on Country data
var autoCompleteDataCountries = function (sourceData) {

    var domID = '#countrySearchField';
    var domHiddenID = '#hiddenCountryID';

    var items = $.map(sourceData, function (obj) { 
        return obj; 
    }); 

    $(domID).autocomplete({
        target: $('#countrySuggestions'),
        source: items,
        callback: function (e) {

            var $a = $(e.currentTarget);
            $(domID).val($a.data('autocomplete').label);                                        
            $(domID).autocomplete('clear');
            $(domHiddenID).val($a.data('autocomplete').value);

            //enable field to enter Hospital
            $('#hospitalSearchField').textinput('enable');

            //Call to autoComplete function for Hospitals
            autoCompleteDataHospitals(availableHospitals.hospitals);
        }
    });     
};

if (continueWorkingOnline === false && continueWorkingOffline === false) {
    alert("For best results this form should be initiated online. You can still use this but auto complete features will be disabled");
}

if (continueWorkingOnline === true && continueWorkingOffline === false) {               
    getRemoteFormData('templates/cfc/Events.cfc?method=getEventsArray', 'eventData');       
    getRemoteFormData('templates/cfc/Countries.cfc?method=getCountriesArray', 'countryData');
    getRemoteFormData('templates/cfc/Hospitals.cfc?method=getHospitalsArray', 'hospitalData');

    $(document).ajaxStop(function () {
        //set the variables once localStorage has been set

        availableEvents = JSON.parse(localStorage.getItem("eventData"));
        availableHospitals = JSON.parse(localStorage.getItem('hospitalData'));
        availableCountries = JSON.parse(localStorage.getItem('countryData'));

        //Inserts data into the events drop down
        populateEventsDropDown(availableEvents);

        autoCompleteDataCountries(availableCountries.countries);            
    });
}

if (continueWorkingOnline === true && continueWorkingOffline === true) {                
    //get the localStorage which we know exists because of continueWorkingOffline is true

    availableEvents = JSON.parse(localStorage.getItem('eventData'));
    availableHospitals = JSON.parse(localStorage.getItem('hospitalData'));
    availableCountries = JSON.parse(localStorage.getItem('countryData'));

    //Inserts data into the events drop down
    populateEventsDropDown(availableEvents);

    autoCompleteDataCountries(availableCountries.countries);        
}       
});

Answer 1

If your bottleneck is downloading that massive json file, the only way to make it less of a bottleneck is to make it smaller or to send less data. For example, you could sort your hospitals by country and store arrays rather than objects with keys to make the json smaller rather than repeating keys over and over.

{
    "AD":[
        "CAIXA ANDORRANA SEGURETAT SOCIAL"
    ],
    "AE":[
        "Advance Intl Pharmaceuticals"
    ],
    ...
    "ES":[
        "Dental 3",
        "Dental 4",
        "Dental 5"
    ]
}

if the id field is important, use

    ...
    "ES":[
        ["10000","Dental 3"],
        ["10001","Dental 4"],
        ["10002","Dental 5"]
    ]

You would of course need to update the rest of your code to use this json format rather than your previous.