Должен ли файл Modernizr быть поставлен в голову?

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

Ответ 1

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

Из руководства :

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

Ответ 2

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

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

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

<html>
    <head>
        …
        <!--[if lt IE 9]>
            <script src="html5shiv.min.js"></script>
        <![endif]-->
    </head>
    <body>
        …
        <script src="modernizr.custom.min.js"></script>
    </body>
</html>

Ответ 3

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

Переместить Modernizr в нижнюю часть

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

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

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

Ответ 4

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

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