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:
and here for the localStorage:
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:
Happy Coding
