CODEWITHSUNDEEP
javascriptperformancemodernizr
Scott Simpson
Scott Simpson

Reputation: 3850

Performance using Modernizr to load HTML5 Shiv

My site uses Modernizr and requires the HTML5Shiv with PrintShiv. Is there any performance benefit in NOT using Modernizr to load these shivs, and instead load them via an IE conditional? Obviously it is cleaner to use Modernizr, but I am focused on performance.

Upvotes: 6

Views: 2344

Answers (3)

Anthony Hatzopoulos
Anthony Hatzopoulos

Reputation: 10547

I was curious myself so I setup some test pages to see.

If your site only needs HTML5Shiv with PrintShiv from modernizr then loading only the html5shiv-printshiv.js using IE conditional will perform better then always loading modernizr for all other browsers (lt IE 9). So in your case you should probably stop using modernizr and just use the shiv in a conditional.

For the IE browsers that require the shivs the load/performance is equal between using modernizr and just the html5shiv. The gains in performance for using the html5shiv only are seen on modern IE browsers (IE9 and IE10)

Test pages:

Test reports using IE9 / Cable:

Comparing those tests, fully loaded, we are saving 1.677 seconds using html5shiv-printshiv.js

Modernizr Update: Read the Docs on Performance Considerations being drafted in an issue ticket on the Modernizr's GitHub project for more details.

Upvotes: 3

Spudley
Spudley

Reputation: 168695

Recent versions of Modernizr can be customised to include only the functionality you need. If you're worried about performance, this might be the way to go.

The Modernizr core is not hugely expensive in terms of performance; the expense is in all the tests that it does. If you customise it down to only do the tests that you need to do, you will save most of the load, but you'll still have the Modernizr core and the parts of it that you need.

Upvotes: 3

ipraetoriux
ipraetoriux

Reputation: 21

I prefer to use HTML5Shiv with Modernizr, and avoid using conditional. In this way I have the code cleaner and avoid putting things unnecessary or duplicate. The performace is the same in IE, because HTML5SHiv will be loaded only with IE less than 9, using Modernizr or HTML5Shiv directly. But HTML5Shiv is not necesary for the other browsers, so, maybe, its a good idea for performance use conditionals

Upvotes: 1

Related Questions