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

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

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

Ответ 1

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

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

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

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

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

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

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

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

Ответ 2

Yahoo YSlow tool имеет следующие рекомендации:

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

Теги

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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

Из эта статья. Также правило 6 эффективности Yahoo - Переместить скрипты в нижнюю часть

Ответ 9

Вы должны сделать это рядом с </body>. Причина проста: если вы поместите ее в область head, файлы должны быть загружены до области тела. За это время пользователь просто видит белый экран.

Но это зависит от вашего сайта. Я бы загрузил фреймворки, такие как mootools в области головы, другие функции для событий или AJAX, или что-то должно быть загружено около </body>.

Ответ 10

Единственная причина, поместив его ближе к концу тела, AFAIK, - это возможность выполнить JavaScript после того, как веб-браузер проанализировал ваш HTML-документ. Например. если ваш JavaScript обрабатывает "все элементы с именем hello", браузер должен прочитать весь документ перед выполнением вашего JavaScript. Имеет смысл, правильно?

В частности. JQuery, вы можете разместить свой JavaScript в любом месте документа и использовать:

$(document).ready(function () {
  // your code here
});

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

Ответ 11

Место <script> Элемент

Элементы script блокируют загрузку прогрессивной страницы.
Браузеры загружают несколько компонентов одновременно, но когда они сталкиваются с внешним script, они останавливают дальнейшие загрузки до тех пор, пока файл script не будет загружен, проанализирован и не будет выполнен.
Это повредит общее время страницы, особенно если это происходит несколько раз во время загрузки страницы.
Чтобы свести к минимуму эффект блокировки, вы можете поместить элемент script в конец страницы, перед закрывающим тегом.
Таким образом, для 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>

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

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

Ответ 12

Вы должны поставить 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.