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
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:
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:
Test C
This is without any styling at all. Each div looks like this:
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.
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
| IE9 | Chrome19 | FF13 | |
| Typical time until received all bytes | 390ms | 330ms | 339ms |
| Typical time until DomContentLoaded event fired | 2,22s | 411ms | 1,33s |
| Typical time until OnLoad event fired | 2,43s | 408ms | 1,34s |
| Time from all all bytes received to onLoad and DomContentLoaded event fired | 2040ms | 81ms | 1001ms |
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.
| IE9 | Chrome19 | FF13 | |
| Typical time until received all bytes | 187ms | 178ms | 195ms |
| Typical time until DomContentLoaded event fired | 1,02s | 227ms | 366ms |
| Typical time until OnLoad event fired | 1,18s | 210ms | 457ms |
| Time from all all bytes received to onLoad and DomContentLoaded event fired | 993ms | 49ms | 262ms |
Test C
This is without any styling at all. Each div looks like this:
<id="d_14">...Test C document size is 179Kb.
| IE9 | Chrome19 | FF13 | |
| Typical time until received all bytes | 172ms | 130ms | 160ms |
| Typical time until DomContentLoaded event fired | 468ms | 175ms | 170ms |
| Typical time until OnLoad event fired | 590ms | 140ms | 253ms |
| Time from all all bytes received to onLoad and DomContentLoaded event fired | 418ms | 45ms | 93ms |
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.
No comments:
Post a Comment
Spammers will be hunted down and punished.