Sunday, 2 September 2012

Complex web pages have huge differences in rendering time in different browsers

I recently had the task of optimizing HTML for a web application that was getting somewhat slow. We were seeing big differences between browsers. Chrome seemed to be exceptionally fast. So I went ahead trying to reproduce this performance issue in order to decide where to go ahead with optimization. 

I knew that the web app had lots of nested divs with a lot of inline styling. I was curious to find out what performance penalties this had so I made this client side performance test.

There's a lot of websites that talk about website optimization and they all say you should minimize the payload that has to go over the wire. I could not find much on the topic of speed when it comes to rendering large HTML documents.

Summary of results
My tests show that large DOMs with many nested elements (in this case 7381 divs) can have a huge impact on client side performance. Compared to Chrome, IE9 spent 9-25 times longer rendering the exact same page.

The tests
I programmatically created 3 html documents; A, B and C. They all have nested divs and some styling. They look something like the grid below. It has 1 big square and inside this square there are 9 squares and inside this there are 9 squares and so on. It goes 4 levels deep so there's a total of 7381 divs. Fairly simple HTML document but the DOM is relatively big.



Measurements where done using the HTML documents that are linked to blow. The server was located in the same country and the Internet connection where this was carried out was very good. The browser cache was unprimed. All the divs have fixed size so drawing the layout is pretty easy for the browser. There is no need to recalculate and re-position elements as the page is gradually received.

Test A 
This document has lots of duplicate inline styles just to create lots of bytesize. Each div looks something like this:
<div id="d_34" style="width:34px; height:34px; float:left; dispaly:block; margin:0; padding:0; border:1px solid #FFFFFF; background-color:#bbb">...
Test A document size is 1.1Mb

IE9Chrome19FF13
Typical time until received all bytes390ms330ms339ms
Typical time until DomContentLoaded event fired 2,22s411ms1,33s
Typical time until OnLoad event fired2,43s408ms1,34s
Time from all all bytes received to onLoad and DomContentLoaded event fired2040ms81ms1001ms


Test B 
This is just the same as A only with all the inline styles moved out to an external css file. Now each div looks like this:
<id="d_34" class="lvl2">...
Test B document size is 237Kb with an additional 400b CSS file.

IE9Chrome19FF13
Typical time until received all bytes187ms178ms195ms
Typical time until DomContentLoaded event fired 1,02s227ms366ms
Typical time until OnLoad event fired1,18s210ms457ms
Time from all all bytes received to onLoad and DomContentLoaded event fired993ms49ms262ms


Test C
This is without any styling at all. Each div looks like this:
<id="d_14">... 
Test C document size is 179Kb.

IE9Chrome19FF13
Typical time until received all bytes172ms130ms160ms
Typical time until DomContentLoaded event fired 468ms175ms170ms
Typical time until OnLoad event fired590ms140ms253ms
Time from all all bytes received to onLoad and DomContentLoaded event fired 418ms45ms93ms



What does all this mean anyway
From the numbers we see that when it comes to comparing browsers, Chrome outperforms the others. IE seems extremely slow when it comes to rendering this particular markup. Although IE9 is credited for being much faster than earlier versions, it is clearly far behind Chrome for this specific test.

Chrome is particularly fast when it comes to rendering. It only uses about 50ms to render the page which consists of more than 7000 elements. Chrome is faster for all cases (with inline styles, with external css file or even without any styling at all).

The test also confirms that avoiding inline styles on elements will increase performance considerably. The reason seem to be not just that there is fewer bytes to transfer but that it is easier for the browser to parse the document.

Please note that our test is not representative for common web pages or for other web pages for that matter. Browsers use different algorithms and techniques for different operations such as receiving, parsing, calculating layout, drawing etc.