JS 1-2k variables make page load slow

Question

On one page of my website the user has the ability to choose and remove up to 2000 items through selecting multiple string representations of them in a dropdown list.

On page load, the objects are loaded onto the page from a previous session into 7 different drop-down lists. In the window.onload event, the function looping through the items in the drop-downs makes an internal collection of the objects by adding them to a global array - This makes the page ridiculously slow to load, so, I'm fairly certain probably doing it wrong!

How else am I supposed to store these variables?

This is their internal representation:

function Permission(PName, DCID, ID) {
   this.PName = PName;
   this.DCID = DCID;
   this.ID = ID;
}

where: PName is string. DCID is int. ID is int.

EDIT:

Thanks for the quick replies! I appreciate the help, I'm not great with JS! Here is more information:

'selectChangeEvent' is added to the Change and Click event of the Drop down list.

function selectChangeEvent(e) {
//... 
addListItem(id);
//...
}

'addListItem(id)' sets up the visual representation of the objects and then calls :

function addListObject(x, idOfCaller) {
var arIDOfCaller = idOfCaller.toString().split('-');
if (arIDOfCaller[0] == "selLocs") {
    var loc = new AccessLocation(x, arIDOfCaller[1]);
    arrayLocations[GlobalIndexLocations] = loc;
    GlobalIndexLocations++;
    totalLocations++;
}
else {
    var perm = new Permission(x, arIDOfCaller[1], arIDOfCaller[2]);
    arrayPermissions[GlobalIndexPermissions] = perm;
    GlobalIndexPermissions++;
    totalPermissions++;
}
}

Answer 1

You may want to consider a design change to support the load. Some sort of paged result set or similar, to cut down on the number of concurrent records being modified.

As much as we desperately want them to be, browsers aren't quite there yet in terms of script execution speed that allow us to do certain types of heavy lifting on the client.

Answer 2

Still not enough to go on, but there are some small improvements I can see.

Instead of this pattern:

var loc = new AccessLocation(x, arIDOfCaller[1]);
arrayLocations[GlobalIndexLocations] = loc;
GlobalIndexLocations++;
totalLocations++;

which seems to involve redundant counters and has surplus assignment operations, try:

arrayLocations[arrayLocations.length] = new AccessLocation(x, arIDOfCaller[1]);

and just use arrayLocations.length where you would refer to GlobalIndexLocations or totalLocations (which fromt he code above would seem to always be the same value).

That should gain you a little boost, but this is not your main problem. I suggest you add some debugging Date objects to work out where the bottleneck is.

Answer 3

While I haven't tested this idea, I figured I'd throw it out there - might it be faster to return a JSON string from the server side, where your array is fully calculated on that side?

From that point, I'd wager that eval()'ing it (as evil as this may be) might be fast enough to where you could then write the contents onto the page, and your array setup would already be taken care of.

Then again, I suppose the amount of work it'd take the browser to construct the 2k new objects and inject them into the DOM wouldn't necessarily help the speed side of things in the end. At the end of the day, a design change is probably necessary, but sometimes we're stuck with what we've got, eh?