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

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

4 59
javascript modernizr html-head

4 ответа:

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

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

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

68

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

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

поскольку около 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>
54

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

переместить Modernizr на дно!--2-->

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

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

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

34

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

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

15