Edge’s performance with HTML5 Web Storage and its position compared to other browsers

Hi,

This post is a little unusual compared to what I usually blog but for some obscure reasons that I don’t want to reveal here :), I have to make an in-depth analysis of HTML5. I’ll tackle most of the APIs such as Web Workers, Web Sockets etc…and it will all be about metrics. I know that there exists several frameworks to benchmark browsers but 1) I find them a little opaque and 2) I’m only interested by HTML5 related metrics. Basically, I don’t want to reinvent the wheel but I need to write some basic scripts whose the purpose is to measure browser performance. For this blog post, I have taken metrics about HTML5 Web Storage. So, I have tested the following:

  • Write and Read 500 entries from the localStorage
  • Write and Read 500 entries from the sessionStorage
  • Take metrics of 50 executions in order to get a pattern out of these tests

The script is pretty basic and is about this :

<!DOCTYPE html>
<html>
<body>
<div id="info"></div>
<script type="text/javascript">
localStorage.clear();
var nbEntries = 500;
var start = new Date().getTime();
for(var i = 0;i<nbEntries;i++)
{
  localStorage.setItem(i, i);
}
var time = new Date().getTime()- start;
document.getElementById('info').innerHTML="Items put in session in "+time+" ms";
start = new Date().getTime();
for(var i = 0;i<nbEntries;i++)
{
  localStorage.getItem(i);
}
time = new Date().getTime()- start;
document.getElementById('info').innerHTML+="
Items retrieved from session in "+time+" ms";
</script>
</body>
</html>

The above script was executed 50 times (separate run) in each of the following browsers:

  • IOS 8.4’s Safari on IPAD, physical device Model MD795NF/A
  • Chrome 44.0.2403.130
  • IE11
  • Edge

For completeness, the machine on which this was performed has 4 cores, 8 logical processors, 2,49GHz, 500GB SSD drives and 32GB of RAM. As you can imagine this was executed first with Windows 8.1 and then with Windows 10 (for Edge). For Chrome, firgures didn’t vary according to the underlying Windows version.

Here are the results for sessionStorage:

sessionstoragegraph

and here for the localStorage:

localstoragegraph

The X axis represent the number of executions while the Y axis represent the time in milliseconds.

What can we see out of these tests?

We clearly see that Edge performs much better than its predecessor IE11. However, it’ still far behind IOS and Chrome when it comes to writing to the localStorage but is the fastest to pull information out of the localStorage. Edge shows better figures than Chrome for both read/write operations with the sessionStorage. It has even similar performance as IOS on IPAD.

IE11 is the worst one in all scenarios. We can identify a clear pattern regarding IE11 and Edge about writing to the localStorage. This operation looks very heavy for both even if improved in Edge. This is quite strange because the spec says that both localStorage and sessionStorage implement the same WindowSessionStorage interface. So, it shouldn’t change anything to write to either of these which tends to be true with the figures of Chrome and Safari IOS 8.4 since they show very similar results. So, what’s the explanation? I don’t really have the answer but the spec (http://www.w3.org/TR/2013/REC-webstorage-20130730/) also mentions that four additional checks should be done when accessing to the localStorage. This could explain why it takes more time although the other browsers are not impacted but…do they perform these checks??
The following charts show the performance average for each browser for writing and reading to the localStorage and sessionStorage:
sessionstorageavgset
sessionstorageavgget

localstorageavgset
localstorageavgget

Happy Coding

Advertisements

About Stephane Eyskens

Office 365, Azure PaaS and SharePoint platform expert
This entry was posted in html5 and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s