One classic scenario of website speed issues relates to retrieving data from a database and often it is the same data being retrieved over and over again. For example storing some of your site settings in the database was originally a great idea as it meant your admin users could configure them through an admin, but now every request from your real users is doing a database call to look up this information.

A way to reduce these database calls is to create a static object that will keep hold of the information once its been retrieved. This could simply be an int or string or it could be something more complex like a List or Dictionary that we keep adding to.

Lets use an example where we are retrieving details of a room. The room can have multiple properties including Name, Capacity and Description. Or database contains multiple instances of rooms that is repeatedly requested.

Rather than accessing the database directly we can create a function that will first look up the value in a List object and if it is not found then revert to loading the information from the database. If the information was retrieved from a database then we also add it to the list for future use.

code for looking retrieving the data

As the List is a static object it will continue to hold the information of the rooms for the life of the application. Some things to watch out for however:

• Static objects will be the same for all users, they are not related to a session
• Static objects are accessible across all threads so you need to be aware that anything you change in the static object will be changing on all threads
• When you return the object you wanted you will most likely be returning a reference to the existing object not just its value

With these things in mind, whenever you are updating the list (adding, removing etc) make sure you create necessary locks so that only 1 thread executes at a time. In the example this has been done when we check for the existence of the item and then go to load it. Without the lock it would be possible for 2 threads to do the check and then both go to load the values. If this were to happen we would end up with 2 instances of room in our list. Even worse if we were using a dictionary instead of a list the second instance would cause an exception when it tried to add it to the dictionary. With the lock the second thread will wait for the first to finish executing before it runs the code.

If your going to do any sort of JavaScript programming it's not going to be long until you have to work with an array, so there's a few array functions you need to know about.

Push and Pop
Push and Pop are functions that add and remove items from an array. The easiest way to understand what they are doing is to imagine your array as a stack of paper. When you push and item onto the array it's the same as putting it on the top of your pile. When you Pop an item off it's the same as taking the top item from the pile.

Foreach loop
Probably one of the most useful functions for an array is the for each loop. A for each loop is essentially calling a function for each item in the array (hence for each). This is particularly useful in all kinds of scenarios.

Filter
As the name suggests filtering is a way to find items in your array. If you know C# then it works in a similar way to a lambda expression. The filter function takes a parameter of a function. Like the forEach loop the function is called on each item in the array, the function must then returns either true or false depending on if the filter criteria matched.

In this example notice that the result of myArray.filter is being assigned to another variable. This is because applying the filter wont actually remove items from the myArray array.

Some, Every
The some and every functions can be used to see if some items in the array match a criteria of if all of them do. They return either true or false.

Like the filter function, a function is passed as the criteria and returns either true or false.

Concat
Concat is used to combine 2 arrays into 2 new array.

Slice
Slice lets you create a new array from an existing by letting you specify the start and end item. Those items and the others between then form the new array.

Splice
Splice can be used to add and remove items in an array. The function has the syntax:

arrayName.splice(index, how many, items to add);

Note: the index value starts at 0.

For example in our colour array we could add yellow and orange in between red and green with the following:

Alternatively we could replace red and green with yellow and orange.

A couple of others

Sort - Sorts the array into alphabetical order

Reverse - Reverses the order of the array

If you want to dynamically load content into your page chances are your going to need to do some sort of request to a server in the background. The simplest way of doing this is to use jQuery's ajax function.

Here's an example of a GET request and a POST request:

One of the best benefits of HTML5 particularly for Web Apps is the ability to store data locally within the users browser. This means in many places you can speed your Web App up by fetching data once and then retrieving it locally in the future, rather than going back to a server each time.

There are 2 types of storage available localStorage and sessionStorage. The simple difference is that localStorage doesn't expire while sessionStorage expires at the end of the users session.

Both types store data in a key/value list and could not be simpler:

One thing to note though is you can only store text. If you want to store something more complex the simple solution is to convert it to and from JSON. E.g.