Когда вы решите загрузить свой JavaScript внизу страницы, а не вверху?

Question

Я видел загрузки библиотек JavaScript вверху и внизу страницы.

Я бы хотел знать, когда делать этот выбор. Весь код JavaScript, который я написал, работает в верхней части страницы, включая плагины jquery.

Когда я загружаю свой скрипт в любую из этих позиций?

Answer 1

Вверх : когда важнее сразу использовать функцию JavaScript для элементов (поэтому, если вы используете событие DOM Ready для загрузки всего, это неправильное место)

Низ : при загрузке более важен контент

Answer 2

Yahoo говорит Поместить сценарии внизу .Google говорит что-то похожее , но не так ясно.

Answer 3

Я помещаю весь CSS в ГОЛОВУ, чтобы избежать чрезмерной экранной живописи и вспышек стиля.

Я размещаю большинство запросов файлов JavaScript внизу страницы, чтобы страница могла быстро отображаться (загрузка HTML / CSS будет блокироваться до тех пор, пока теги скриптов над ними не будут загружены и обработаны). Любой код, который должен быть выполнен после загрузки файлов библиотеки, выполняется в DOMReady, который является всем кодом, кроме инициализации библиотеки. Я в значительной степени следовал рекомендациям Google PageSpeed ​​.

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

Answer 4

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

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

Answer 5

Когда браузер обнаруживает элемент script, он должен оценить JavaScript, содержащийся в этом элементе, потому что скрипт может изменить содержимое страницы (через document.write) или проверить текущее состояние страницы.

Если элемент script загружает сценарий с использованием атрибута src, загрузка других ресурсов (JavaScript, CSS, изображения и т. Д.) Будет заблокирована до загрузки текущего сценария.

Оба эти фактора могут замедлить воспринимаемое время загрузки вашей страницы.

Если ваш JavaScript не изменяет страницу или вам не нужно проверять состояние страницы, пока она не загрузится, вы можете пометить свой элемент script с помощью defer="defer" (поддерживается IE 6+ и Firefox 3.5 +) что указывает на то, что оценка сценария может произойти «позже». Перемещение ваших элементов script вниз страницы фактически делает то же самое - поскольку ваши скрипты появляются в конце документа, они будут оцениваться после загрузки CSS, изображений и т. Д. И рендеринга HTML-кода.

Answer 6

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

Answer 7

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

Answer 8

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

Если вы обращаетесь к DOM только через вызовы функций (например, onload, onclick и т. Д.), Вы можете безопасно поместить скрипт в сам раздел head.

Answer 9

Я поместил все внешние скрипты (такие как Google Analytics) внизу, чтобы их задержка не влияла на загрузку DOM.