session storage and performance

Question

I have an object that contains data relative to the user's UI. For the moment, the data comes in the form of json, I run JSON.parse to evaluate the object and generate some HTML accordingly.

I'm thinking of storing the json string in the local session storage (not the local storage) and calling it each time the UI needs to be updated with new HTML. This way, if the user opens another page in the same browser, all the HTML of all the pages will be the same.

For now, the object is stored in memory and the interactions between the user's actions on the UI and the object's modifications run fast. If I serialize it and store in the session storage, will the browsers store the data in RAM or on the hard drive and slow down the page?

Sible

I'd say it completely depends on the browser's implementation, no? – Secco

what do you want to achieve? improve performance? – Content

@Kishore: I think the best performance is to keep the object in RAM. I want to move to session storage to keep the data synchronized if the user opens another page in his browser. – Sible

Answer 1

Taken from the html5 spec:

The lifetime of a browsing context can be unrelated to the lifetime of the actual user agent process itself, as the user agent may support resuming sessions after a restart.

Which means browsers may store this information to disk.

Performance will be up to browser specific and OS specific implementations. However, fetching this information is very unlikely to be a bottleneck.

Bott

session storage doesn't persist after a restart; you're referring to local storage. I plan to use session storage. – Sible

@frenchie, no I am not. A browser may clear session storage when closed, however since browsers may also support resuming sessions the line as the user agent may support resuming sessions after a restart is quite pertinent. – Stanchion

Answer 2

I did this small test FF 32, Chrome 37, IE 11. Just for fun.

console.clear();
var s = new Date();
for(var i=0; i < 100000; i++)
{
  sessionStorage.item = i.toString();
}
var e = new Date();
console.log("session: " + (e - s) + " ms");

s = new Date();
var mem;
for(var i=0; i < 100000; i++)
{
  mem = i.toString();
}
e = new Date();
console.log("mem: " + (e - s) + " ms");

s = new Date();
for(var i=0; i < 100000; i++)
{
  localStorage.item = i.toString();
}
e = new Date();
console.log("local: " + (e - s) + " ms");
console.log('Done');

FF

• session: 830 ms
• mem: 92 ms
• local: 1156 ms

Chrome

• session: 2852 ms
• mem: 147 ms
• local: 2893 ms

IE

• session: 977 ms
• mem: 81 ms
• local: 15062 ms

Safari (different device)

• session: 380 ms
• mem: 21 ms
• local: 248 ms

After finishing test browser's window got frozen for few seconds and CPU + Disk activity increased (caused by localStorage).

Topfull

These are the times to create object. For session storage you do it once for the browser tab and then read from sessionsStorage. For mem storage you do have to create for each page. What's important in my case is does the browser get sessionStorage (already created) from disk or RAM? Currently for every page load I'm getting about 3 to 4 MB over broadband (which is slow). It is smart to get it once and store it in sessionStorage because even a hard disk is probably faster than the internet. – Holmberg