There is a growing sentiment in the performance community to render pages as fast as possible, and avoid any blocking JS in the head. Moving JS to the bottom of an HTML document has long been a best practice, but Modernizr was often considered one of the few exceptions to this rule.
I think it's responsible for us to offer some method of avoiding the blocking-JS-in-head problem. In my opinion the option to set defer on the script tag is more attractive than changing drupal_add_js() scope; it's just a bit you have to flip and nothing more.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | 2252899-2-defer-modernizr.patch | 1.91 KB | rupl |
Comments
Comment #1
ruplWhaddya know: https://github.com/Modernizr/Modernizr/issues/878#issuecomment-41448059
Comment #2
ruplHere's the patch. It defers by default, per discussion on GitHub in comment #1.
You should see markup similar to the following after applying the patch:
If you visit
/admin/config/development/modernizr/settingsthere is an option to switch back to synchronous loading, and if you select it thedeferattribute should be removed entirely.Comment #4
ruplCommitted to dev!
Comment #8
ruplIt was brought to my attention that using this new
deferoption along with our Drupal-poweredModernizr.load()results in an error because you can'tdeferinline scripts.So the reference to modernizr.js is deferred, but the Modernizr.load() code is *not* deferred, runs immediately, and produces an
Uncaught ReferenceError: Modernizr is not defined.I think the quickest fix might be to detect if
hook_modernizr_load()produces anything, and if it is being used then we manually remove thedeferattribute. A longer-term fix would be to cache the Modernizr.load() code in a Drupal-cached file (similar to aggregates) so that both scripts can be deferred.More info about
deferavailable on MDN.Comment #9
ruplReclassifying issue to match current situation.
Comment #10
katzmo commentedSince modernizr is used for browser compatibility IMHO the default settings should work for as many use cases as possible, especially in old browsers, and not break existing installations. Defer does both. (See http://caniuse.com/#search=defer and Known Issues for browser compatibility)
So why not keep 'synchronous' as default setting? If you don't need things like html5shiv and rather load modernizr asynchronous, then you may change your settings accordingly!
Comment #11
ruplYou're right. I should have fixed this a month ago anyway when I discovered the problem in comment #8.
Comment #13
marcvangendI completely agree with #10. This fix would have saved me 2 hours of figuring out why the html5shiv wasn't doing anything in IE8.
This issue is fixed I guess. A new release would be appreciated!
Comment #15
ruplMy sincere apologies :( There is a new release now.
edit: https://www.drupal.org/node/2403197