Things are afoot. I’m building out the redesign of Drunkenfist.com, and we’re working on an internal redesign at work. I’ve been toying with the idea of using the new HTML5 semantic elements for both and to that end I took some time to evaluate Modernizr, the small JS library that programatically exposes HTML5/CSS3 feature support (via classes on the HTML element) and “fixes” IE’s style support for some of the newer semantic elements.
First, a quick review: It works, it feels lightweight and is well written.
Thumbs up all around.
If you’re the kind of person that doesn’t care how many scripts you attach to your pages, then read no further because Modernizr behaves as advertised and if you’ve already got 20 JavaScript files attached to your page, what’s another one?
If, like me, you are neurotic about adding elements or code to the page without understanding what it will do to the page’s performance then read on for some details on the overhead (and one note on how I’ll handle the file when moving it into production.)
So, how Fast Is It?
Pretty damn fast.
I did some tests in Internet Explorer 7 and Firefox and overall the addition of Modernizr adds 50-150ms to the page load time. The test was run against the current development version of the DrunkenFist.com home page template with no other changes- one version had Modernizr and the other one didn’t. I tested in IE7 using Web Page Test and used Steve Souders’ Hammerhead to “hammer” the page in Firefox*.
| Load Time | Requests | Bytes In | |
|---|---|---|---|
| Home Template With Modernizr | 1.284s | 9 | 24 KB |
| Home Template | 1.138s | 8 | 20 KB |
| Difference | +0.148s | 1 | 4 KB |
| url | cachetype | Runs | Latest | Median | Average |
|---|---|---|---|---|---|
| Home Template | emptycache | 1000 | 621ms | 478ms | 524ms |
| Home Template With Modernizr | emptycache | 1000 | 596ms | 520ms | 568ms |
| Difference | +42ms | +44ms | |||
| Home Template | primedcache | 1000 | 276 | 249 | 304 |
| Home Template With Modernizr | primedcache | 1000 | 724 | 351 | 417 |
| Difference | +102ms | +113ms |
As you can see it’s really just a blip of overhead. Not bad at all really.
Of course, since when is “not bad” good enough for me? I’m going to make at least one tweak to improve performance which is combining the Modernizr script into a single file. A single file, minified and gzipped? I probably won’t even notice. That’s my kind of library.
By the way, running 1000 tests in Hammerhead is a fun way to eat up browser memory:
*I tested it much more thoroughly in Firefox since my initial results were so weird, showing up to a 500ms difference between the two versions. I wanted to average out any oddness on my machine.