The following tests measure the amount of time it takes the browser to create, parse and render a chunk of html, specifically a 300x30 table with and without any content in the cells. Each test runs 3 times, and the slowest result is discarded. The method for running tests and taking measurements is as follows:
prepare for test (pre-generate html, clear target, etc) setTimeout with delay=0 // let all pending events clear up get the start time run the test setTimeout with delay=0 // let the test finish get the end time and store the deltaI ran all tests on a 2Ghz Core Duo laptop with Radeon x1400 video card, 1 GB of memory, Windows XP sp3, running on battery power (too lazy to get up and plug it into the wall). All results are in milliseconds.
The contendersHere are the contenders, with their identification strings
- IE 7. Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
- Opera 9.52 Opera/9.52 (Windows NT 5.1; U; en)
- Safari 3.1 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.19 (KHTML, like Gecko) Version/3.1.2 Safari/525.21
- Chrome 0.2 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
- Firefox 3.01 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:184.108.40.206) Gecko/2008070208 Firefox/3.0.1
- Firefox 3.1 nightly, pre-beta 1, TraceMonkey jit enabled Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1b1pre) Gecko/20080905031348 Minefield/3.1b1pre
These tests measured the amount of time it takes a browser to parse and render a pre-generated 300x30 html table into an on-screen element via innerHTML, into an off-screen element (a div that is not attached to the document) via innerHTML, and a combination of both, where the table is rendered into an off-screen div, then moved to the on-screen one.
These tests were ran using both the default style and a pre-defined style (fixed cell height/width, font, border, etc), and with empty and non-empty tables (cells were filled with non-breaking spaces for empty, and strings in the form of "row, column" for non-empty)
|browser||style||render on-screen||render off-screen||combo|
DOM testsIn these tests, the tables were constructed into an off-screen buffer using DOM operations. Cloning was used as much as possible, and the contents of the cells were set using textContent or innerText where available, and using createTextNode otherwise.
- You're OK as long as you are not using the Internet Explorer. Unfortunately, it looks like most of the power users have already switched away from it. Maybe Google can find a way to switch some of the non-power base, though as long as it is bundled with Windows it'll have a large user base. I hear people still use AOL
- Chrome is good. Looks like Google developers managed to speed up Safari's Webkit even further, so Chrome in the lead and Safari won't be far behind
- Mozilla people better start worrying about rendering. The current results are disappointing
- I expected Opera to be faster