Можно ли асинхронный modernizr?

Тест Google PageSpeed говорит мне использовать async

Например, изменение

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>

К

<script async src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>

Будет ли модернизатор по-прежнему работать нормально?

2 3
javascript performance asynchronous modernizr

2 ответа:

Modernizr необходимо поместить в <head> по двум причинам:

  1. html5shiv должен быть там для Олди.
  2. избегая FOUC при использовании modernizr-размещенных классов для особенность-условный стиль

Вы можете использовать асинхронный атрибут и/или поместить его в нижней части, если ни один из них не имеет для вас значения.

Посмотрите на этот номер, опубликованный в Modernizr

3

Modernizrне нужно помещать в <head>.

Modernizr будет работать в конечном счете прекрасно, когда вы его включаете.

Если вы делаете modernizr script асинхронным , или включаете его после некоторых значимых событий загрузки страницы(DOMContentLoaded, window.onload...)

  • применение специфических правил css (feature, no-feature классы в документе head) задержится .
  • доступность window.Modernizr также будет отложена вместе с ее объектом свойства (то есть Modernizr.propery)

Короче говоря,

  • плохая вещь, которая может случиться с вашим CSS, если вы используете async загрузку Modernizr-это неправильные стили (те, которые зависят от классов <html>), применяемые в течение некоторого времени
  • плохая вещь, которая может случиться с вашим JS кодом, заключается в том, что если вы используете Modernizr глобальный объект, вы не можете использовать его напрямую, поскольку он может и не загружаться - вам придетсяждать его каким-то образом. Так что, нет еще: 

if(Modernizr.cssanimations){
    // your feature-dependant code
}

Но вместо этого: 

if(typeof Modernizr !== "undefined"){
//uitilize Modernizr global object here
} else {
// implement waiting for this object, let's say write short onModernizrLoad() function...
}
0