файл Modernizr должен быть помещен в голову? - PullRequest
Новая
       27

файл Modernizr должен быть помещен в голову?

61 голосов
/ 08 июня 2011

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

Ответы [ 4 ]

71 голосов
/ 08 июня 2011

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

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

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

54 голосов
/ 18 апреля 2013

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

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

Поскольку около 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>
34 голосов
/ 08 октября 2014

Пол Ирриш (Paul Irish) теперь полагает, что для> 75% сайтов нет смысла размещать Modernizr в head.

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

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

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

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

15 голосов
/ 26 января 2015

Как насчет использования условных выражений 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 и ниже и будет загружаться раньше, чем тело для любых других браузеров.

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

...