Что за и против: положить javascript в голову и положить прямо перед телом закрыть

Большинство javascript и книг/статей по разработке веб-сайтов говорят, что вы должны поместить CSS в главный тег и javascript в нижней части страницы.

Но когда я открываю html-источник известных веб-сайтов, таких как этот один stackoverflow, я считаю, что они помещают некоторые js файлы в главный тег.

Какие плюсы и минусы обоих подходов и когда использовать какие?

Нашел еще один вопрос по той же проблеме: Где я должен объявлять файлы JavaScript, используемые на моей странице? В < head </head> или около </body> ?

Ответ 1

Из Yahoo Лучшие практики для ускорения вашего веб-сайта:

Проблема, вызванная скриптами, заключается в том, что они блокируют параллельные загрузки. Спецификация HTTP/1.1 показывает, что браузеры скачать не более двух компоненты параллельно для имени хоста. Если вы обслуживаете свои изображения из нескольких имена хостов, вы можете получить более двух загрузки происходят параллельно. В то время как a script загружает, однако, браузер не запускает никаких других загрузок, даже на разных имена хостов.

В некоторых ситуациях это непросто переместите скрипты на дно. Если для Например, script использует document.write, чтобы вставить часть содержимое страницы не может быть перемещено ниже на странице. Также может быть проблемы. Во многих случаях являются способы обхода этих ситуации.

Альтернативное предположение, что часто появляется возможность использовать отложенные сценарии. Атрибут DEFER указывает, что script не содержит document.write, и это ключ к браузерам, которые они могут продолжить рендеринг. К сожалению, Firefox не поддерживает атрибут DEFER. В Internet Explorer script может отложить, но не так сильно, как желательно. Если a script можно отложить, его также можно перемещать на дно страница. Это сделает вашу сеть страницы загружаются быстрее.

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

Ответ 2

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

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

Если вы добавляете стили или элементы (например, переключаете текстовые поля с помощью какого-то более богатого редактора), это будет видно пользователю как мерцающее.

Если вы добавляете элементы click-events в элементы, они не будут доступны для клика, пока бит не будет показан после того, как сами элементы будут видны.

Иногда тезисы требуют, чтобы вы вставляли свои скрипты в голову, иначе вы будете в порядке, вставив их внизу.

ИМХО (полностью против YSlow и много умных людей), вы должны держать свои скрипты в главном теге и просто полагаться на них, чтобы кэшировать большую часть времени.

Ответ 3

В общем, вы должны разместить ссылки script в нижней части страницы. Сценарии не только нужно загружать, они также должны быть оценены и выполнены до того, как блок будет выпущен, и страница продолжит процесс рендеринга. Такие вещи, как Modernizr, должны быть размещены в верхней части, потому что он выполняет некоторые функции обнаружения, а также прокладки HTML5, которые вы, вероятно, захотите.

Еще одна причина, по которой вы хотите поместить скрипты в нижней части страницы, - это одиночные точки сбоя или SPOF. В этом случае время ожидания script или по какой-либо другой причине блокирует выполнение страницы. Это может произойти много с сторонними рекламными библиотеками и т.д.

Да, вам, возможно, придется немного подумать о том, как вы архитектируете свое приложение, но я нашел, что это очень быстро для меня очень быстро. За последние 4 года я создал сотни веб-приложений с script внизу, и я могу сказать разницу. Я могу быть 500 мс, это может быть 5000 мс, но все это имеет значение.

Ответ 4

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

Ответ 5

Это действительно зависит от вашего сайта. Если вы обращаетесь к JavaScript-функциям внутри тела и вызываете их, тогда он должен быть указан в заголовке так, чтобы он был загружен. Если вы только собираетесь называть JavaScript, когда весь документ загружен, тогда целесообразно разместить JavaScript в конце тела. Поместив файл .JS в конец, вы загрузите всю страницу, а затем извлечете файл .JS. Таким образом, пользователь сможет быстро просмотреть страницу, и к тому времени, когда он/она знакомятся со страницей, файл .JS уже загружен.