Где я должен объявить файлы JavaScript, используемые на моей странице? В <head></head> или около </body>? - PullRequest
38 голосов
/ 18 июня 2009

Я читал учебник, и автор упомянул, что он включает файлы Javascript рядом с закрывающим тегом body (</body>) в HTML.

Мне было интересно, какую функциональность я не должен объявлять / определять JavaScript, включаемый в раздел head? Для меня имеет смысл включать JavaScript, такой как Google Analytics, рядом с закрывающим тегом body. Где я должен быть осторожен при определении JavaScript-включения рядом с закрывающим тегом body?

Ответы [ 12 ]

39 голосов
/ 18 июня 2009

Часто утверждают, что в целях ускорения вы должны помещать теги сценария прямо в конец документа (перед тегом close body). Хотя это приведет к самой быстрой загрузке страницы, у нее есть некоторые серьезные недостатки.

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

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

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

Например, если вы поместили таблицу в документ и прямо перед тегом закрытия тела:

$(function() {
  $("tr:nth-child(odd)").addClass("odd");
});

при соответствующей стилизации этот эффект часто будет виден. Лично я думаю, что это потенциально плохо для пользователя. Я думаю, что часто вам лучше иметь загрузку страницы немного медленнее (помещая сценарии вверху), если вы не получаете смущающие визуальные эффекты.

Обычно я выступаю за эффективные стратегии кэширования, поэтому вам нужно только загружать файлы Javascript при их изменении, как в Добавление Javascript в PHP (но принципы применимы к любому языку, а не только PHP) и по-прежнему помещать скрипты на вершине. Это гораздо удобнее.

12 голосов
/ 18 июня 2009

Помещая их в <head/>, вы заставляете браузер загружать файлы, прежде чем он сможет отобразить страницу. Это приводит к замедлению воспринимаемого времени загрузки.

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

Что лучше работает, зависит от вас и от того, как вы разрабатываете свой код.

12 голосов
/ 18 июня 2009

У инструмента Yahoo YSlow есть советы по этому вопросу:

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

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

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

4 голосов
/ 18 июня 2009

Google pagepeed есть приятное объяснение о том, как распараллелить загрузку скриптов.

И все же их совет - поместить их в заголовок вашей страницы.

2 голосов
/ 18 июня 2009

Теги скрипта обычно должны быть в разделе заголовка. Исключение составляют случаи, когда они выполняют значительную немедленную обработку, которую следует отложить до как можно более позднего периода загрузки страницы, чтобы не мешать появлению страницы, как в Google Analytics, или когда фактическое размещение тега скрипта является частью его поведения.

1 голос
/ 05 января 2010

Я считаю, что лучше размещать теги сценария непосредственно перед закрывающим тегом body. Потому что:

  • Элементы блокируются от рендеринга, если они находятся ниже сценария.
  • В IE6 ресурсы IE7 на странице блокируются для загрузки, если они находятся ниже сценария.

Из этой статьи. Кроме того, правило производительности Yahoo 6: Перемещение сценариев внизу

1 голос
/ 19 июня 2009

Мне нравится загружать небольшой js-файл в голову, который обрабатывает (1) все, что происходит перед отображением страницы, и (2) загрузку других файлов сценариев после загрузки страницы или по мере необходимости.

1 голос
/ 18 июня 2009

Причина объявления ближе к концу состоит в том, что ваша страница может начать рисоваться до того, как придется ждать получения .js.

Поэтому, то, что вы хотели бы в конце, не будет влиять на рендеринг страницы.и наоборот.

0 голосов
/ 30 мая 2015

Вы должны поместить JavaScript прямо перед </body>. В идеале ваш HTML должен работать без JavaScript, поэтому он должен быть одним из последних загруженных.

Помните, что вы должны использовать CSS, чтобы скрыть элементы, а не JavaScript. Это позволяет избежать появления и исчезновения элементов при загрузке страницы.

Вы также можете столкнуться со следующей проблемой ...

Проблема

В этом сценарии я собираюсь использовать PHP в качестве примера.

Ваш footer.php файл в настоящее время может выглядеть следующим образом:

<script src="jquery.js"></script>
<script src="custom.js"></script>
</body>
</html>

Но что происходит в тех редких случаях, когда вы хотите добавить <script> исключительно для одной страницы? Вы не сможете поместить его после footer.php, потому что вы больше не будете в теге <body>, но вы не можете поместить его раньше, потому что тогда вы пропустите jquery.js из своего кода .

Решение

Файл footer-start.php:

<script src="jquery.js"></script>
<script src="custom.js"></script>

И footer-end.php файл:

</body>
</html>

И пусть ваш footer.php будет простым:

<?php
  require 'footer-start.php';
  require 'footer-end.php';

Затем, в редких случаях, когда вам нужно использовать пользовательский <script> для одной страницы, сделайте это:

<?php require 'footer-start.php'; ?>
<script>...</script>
<?php require 'footer-end.php'; ?>

Выполнение этого означает, что вам не нужно менять весь свой предыдущий код, на который ссылается footer.php.

0 голосов
/ 19 мая 2012

Место элемента

Элементы скрипта блокируют последовательную загрузку страниц.
Браузеры загружают несколько компонентов одновременно, но когда они сталкиваются с внешним скриптом, они останавливают дальнейшую загрузку, пока файл скрипта не будет загружен, проанализирован и выполнен.
Это ухудшает общее время страницы, особенно если это происходит несколько раз во время загрузки страницы.
Чтобы свести к минимуму эффект блокировки, вы можете поместить элемент script ближе к концу страница, прямо перед закрывающим тегом.
Таким образом, не будет других ресурсов для блокировки скрипта. Остальные компоненты страницы будут загружены и уже привлекают пользователя.
Наихудшим антипаттерном является использование отдельных файлов в заголовке документа:

<!doctype html>
<html>
<head>
    <title>My App</title>
    <!-- ANTIPATTERN -->
    <script src="jquery.js"></script>
    <script src="jquery.quickselect.js"></script>
    <script src="jquery.lightbox.js"></script>
    <script src="myapp.js"></script>
</head>
<body>
...
</body>
</html>

Лучший вариант - объединить все файлы:

<!doctype html>
<html>
<head>
    <title>My App</title>
    <script src="all_20100426.js"></script>
</head>
<body>
    ...
</body>
</html>

И лучший вариант - поместить комбинированный скрипт в самый конец страницы:

<!doctype html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    ...
    <script src="all_20100426.js"></script>
</body>

«Шаблоны JavaScript», Стоян Стефанов (O'Reilly). Copyright 2010 Yahoo !, Inc., 9780596806750. ”

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...