следует ли помещать файл Modernizr в голову?

Следует ли размещать ссылку на файл JavaScript Modernizr в заголовке страницы? Я всегда стараюсь размещать все скрипты внизу страницы и хотел бы это сохранить. А если это нужно в голове, зачем?


javascript modernizr html-head
person amateur    schedule 07.06.2011    source источник

Ответы (4)


arrow_upward
72
arrow_downward

Если вы хотите, чтобы Modernizr загружался и запускался как можно скорее, чтобы предотвратить FOUC, поместите его в <head>

Из их руководства по установке:

Поместите теги сценария в <head> вашего HTML. Для лучшей производительности вы должны сделать так, чтобы они следовали за ссылками на вашу таблицу стилей. Причина, по которой мы рекомендуем разместить Modernizr в голове, двоякая: HTML5 Shiv (который включает элементы HTML5 в IE) должен выполняться перед <body>, и если вы используете какой-либо из классов CSS, которые добавляет Modernizr, вам понадобится чтобы предотвратить FOUC.

person Wesley Murch    schedule 07.06.2011
comment
Ха, ФОБУК. +1 только за это! - person eduncan911; 18.07.2012
comment
Похоже, что FOBUC (Flash Of Butt-Ugly Content) потерял популярность для FOUC (Flash of Unstyled Content). Google даже не может (или не хочет) найти на него ссылку. Ба. - person Wesley Murch; 06.09.2013
comment
Если вы обнаружите это совсем недавно, обновление Пола Айриша охватывает это в сообщении 2014 года здесь github.com/Modernizr/Modernizr/issues/878#issuecomment-41448059 - person Simon; 25.11.2015

arrow_upward
55
arrow_downward

Я бы сказал, что нет: каждый скрипт, который вы помещаете в <head>, будет блокировать рендеринг и дальнейшее выполнение скрипта. Единственное, что делает Modernizr, что должно происходить в <head>, - это интегрированный html5shiv, который взламывает поддержку тегов HTML5 в Internet Explorer 8 и более ранних версиях.

Я тестировал это вчера и обнаружил, что это довольно важно - на сайте, над которым я работаю, который уже довольно хорошо оптимизирован, добавление этого единственного скрипта в голову задерживало время загрузки на ~ 100 мс в IE9, что даже не выигрывает от заточки!

Поскольку около 90% моего трафика поступает из браузеров, которые изначально поддерживают HTML5, и у меня нет основного CSS, который требует, чтобы классы modernizr отображались правильно при первоначальном рендеринге, я использую этот подход, который помещает html5shiv в условный комментарий и загружает модернизр без встроенной регулировочной шайбы:

<html>
    <head>
        …
        <!--[if lt IE 9]>
            <script src="html5shiv.min.js"></script>
        <![endif]-->
    </head>
    <body>
        …
        <script src="modernizr.custom.min.js"></script>
    </body>
</html>
person Chris Adams    schedule 18.04.2013
comment
У меня такая же проблема! загружая modernizr.js и response.js, это значительно замедляет время загрузки моей страницы. Вы настраивали свой файл js для удаления заточки или включаете и то, и другое? - person Oneezy; 13.05.2013
comment
Мой modernizr.custom.min.js исключает заточку и также был адаптирован только для проверки функций, которые я действительно использую. В зависимости от ваших потребностей, это может быть достаточно мало, чтобы рассмотреть возможность встраивания на страницу. - person Chris Adams; 13.05.2013
comment
спасибо Крис. Сейчас работаю над довольно большим проектом, так что мне понадобится весь пакет ... просто снимите заточку и включите его отдельно. также пытаюсь заставить requireJS поработать за нас - person Oneezy; 14.05.2013

arrow_upward
34
arrow_downward

Пол Айриш теперь предполагает, что для ›75% сайтов размещение Modernizr в head бесполезно.

Переместите Modernizr вниз

У него больше возможностей для возникновения неожиданных ситуаций, однако для пользователя гораздо лучше вообще не иметь сценариев в голове.

Бьюсь об заклад, ›75% сайтов не нуждаются в этом в голове. Я бы предпочел изменить это значение по умолчанию и обучить 25%, чем смотреть, как мы замедляем работу всех этих сайтов.

https://github.com/h5bp/html5-boilerplate/issues/1605

person David Murdoch    schedule 08.10.2014

arrow_upward
15
arrow_downward

Как насчет использования условных операторов IE немного по-другому? Что все думают об этом решении:

В тегах <head></head>:

<!--[if lt IE 9 ]>
<script src="/path/to/modernizr.js"></script>
<![endif]-->
</head>

Перед концом тега </body>:

<!--[if gt IE 8]><!-->
<script src="/path/to/modernizr.js"></script>
<!--<![endif]-->
</body>

Это приведет к загрузке Modernizr в заголовке для IE8 и ниже, и он будет загружаться раньше тела для любых других браузеров.

Открытое обсуждение плюсов и минусов приветствуется в комментариях.

person redfox05    schedule 26.01.2015
comment
да, это то, что я подумал, это кажется очевидным. Загрузите настраиваемую прокладку + модернизатор (объединенную для уникального запроса) только для ‹IE9 - person aMarCruz; 14.04.2015
comment
Есть ли причина не делать этого таким образом? - person Duncan Luk; 24.04.2017