файла - теги javascript




Где я должен помещать теги<script> в разметку HTML? (14)

В зависимости от сценария и его использования наилучшим (с точки зрения загрузки страницы и времени рендеринга) может быть не использовать обычный <script> -tag per se, а динамически запускать загрузку скрипта асинхронно.

Есть несколько разных методов, но наиболее прямолинейным является использование document.createElement («script»), когда запускается событие window.onload. Затем сценарий загружается первым, когда сама страница была отображена, что не влияет на время, когда пользователю приходится ждать появления страницы.

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

Для получения дополнительной информации см. Сценарии асинхронного обмена сообщениями от Steve Souders (создатель YSlow, но теперь в Google).

При встраивании JavaScript в HTML-документ, где нужно разместить теги <script> и включить JavaScript? Кажется, я помню, что вы не должны размещать их в разделе <head> , но размещение в начале раздела <body> тоже плохо, так как JavaScript должен быть проанализирован до того, как страница будет полностью отображена ( или что-то типа того). Кажется, что это конец раздела <body> как логическое место для тегов <script> .

Итак, где подходящее место для размещения тегов <script> ?

(Этот вопрос ссылается на этот вопрос , в котором было высказано предположение, что вызовы функций JavaScript должны быть перенесены из тегов <a> теги <script> . Я специально использую jQuery, но более общие ответы также подходят.)


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

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

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


Вы можете разместить большинство ссылок <script> в конце <body> ,
Но если на вашей странице есть активные компоненты, которые используют внешние скрипты,
то их зависимость (js-файлы) должна появиться до этого (в идеале в теге head).


Вы можете разместить там, где хотите сценарии, и один не лучше, чем другой.

ситуация такова:

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

определение хорошей практики не зависит от того, где.

чтобы поддержать вас, я упомянул следующее:

вы можете разместить:

и страница будет загружаться линейно

страница загружается асинхронно с другим контентом

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

Хорошая практика здесь будет, когда будет реализовывать каждый?

Надеюсь, что я был полезен, все просто ответило мне на эту проблему.


Зависит, если вы загружаете скрипт, необходимый для стилизации вашей страницы / использования действий на вашей странице (например, нажатие кнопки), тогда лучше разместить ее сверху. Если ваш стиль составляет 100% CSS, и у вас есть все варианты резервного копирования для действий кнопки, вы можете поместить его в нижнюю часть.

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


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

Я слышал, что старые версии сафари были quarky, когда добавляли ваш скрипт вне заголовка, но я говорю, кто заботится. Я не знаю, чтобы кто-нибудь использовал этот старый дерьмо.

Хороший вопрос, кстати.


Незадолго до закрытия тега тела, как указано в

http://developer.yahoo.com/performance/rules.html#js_bottom

Поместите скрипты в нижнюю часть

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


Обычный (и общепринятый) ответ «внизу», потому что тогда весь DOM будет загружен, прежде чем что-либо начнет выполнение.

Существуют разногласия по разным причинам, начиная с доступной практики, чтобы преднамеренно начать выполнение со страничным событием onload.


Стандартный совет, продвигаемый Yahoo! Команда Exceptional Performance состоит в том, чтобы поместить теги <script> в конец тела документа, чтобы они не блокировали отображение страницы.

Но есть несколько более новых подходов, которые обеспечивают лучшую производительность, как описано в этом ответе о времени загрузки файла JavaScript Google Analytics:

Есть несколько отличных слайдов от Steve Souders (эксперт по оценке на стороне клиента) о:

  • Различные методы для загрузки внешних файлов JavaScript параллельно
  • их влияние на время загрузки и отображение страницы
  • какие индикаторы «в процессе» отображаются в браузере (например, «загрузка» в строке состояния, курсор мыши для песочных часов).

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


прежде всего, чтобы представить мою диаграмму и хорошо понять объяснение, вы должны знать этот цвет,

вы должны поместить их в конец тела перед закрытием тега (body), это поможет вам игнорировать любую ошибку

<body>
  <script></script>
</body>

но вы можете поместить их перед закрывающим тегом,

<head>
  <script></script>
</head>

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

  1. Приостановить разбор документа.
  2. Сделайте запрос на выборку файла.
  3. Выполните скрипт после его загрузки.
  4. Возобновление разбора документа.

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

1. Первый атрибут

Async: Когда вы добавляете асинхронный атрибут к тегу скрипта, произойдет следующее.

 <script src="myfile1.js" async></script>
 <script src="myfile2.js" async></script>
  1. Сделайте параллельные запросы для извлечения файлов.
  2. Продолжайте разбирать документ так, как будто он никогда не прерывался.
  3. Выполняйте отдельные скрипты в момент загрузки файлов.

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

ВНИМАНИЕ: Сценарии, которые вы программно вставляете в DOM, по умолчанию асинхронны, если вы явно не установили для асинхронного атрибута значение false во время вставки.

  1. Второй атрибут

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

<script src="myfile1.js" defer></script>
<script src="myfile2.js" defer></script>
  1. Сделайте параллельные запросы для получения отдельных файлов.
  2. Продолжайте разбирать документ так, как будто он никогда не прерывался.
  3. Закончите синтаксический разбор документа, даже если файлы сценария загрузились.
  4. Выполняйте каждый скрипт в том порядке, в котором они встречались в документе.

Как вы можете сказать, отложить в значительной степени то, что вы хотите делать в своих файлах. Однако, из-за ограниченной поддержки браузеров, это не жизнеспособный вариант на момент написания. ВНИМАНИЕ: Атрибуты async и defer игнорируются для скриптов, не имеющих атрибута src.

но когда я должен использовать что? Обычно вы хотите использовать async, где это возможно, а затем не откладывать атрибут. Ниже приведены некоторые общие правила:

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

В конце HTML-документа

Так что это не повлияет на загрузку HTML-документа в браузере во время выполнения.


<script src="myjs.js"></script>
</body>

тег сценария должен использоваться всегда перед телом close или Bottom в HTML- файле.

то перед загрузкой js- файла вы можете увидеть содержимое страницы.

проверьте это, если требуется: http://stevesouders.com/hpws/rule-js-bottom.php


  • Если вы по-прежнему много заботитесь о поддержке и производительности в IE <10, лучше ВСЕГДА сделать ваши теги сценария последними тегами вашего тела HTML. Таким образом, вы уверены, что остальная часть DOM была загружена, и вы не будете блокировать и рендеринг.

  • Если вам больше неинтересно об IE <10, вы можете поместить свои сценарии в начало своего документа и использовать defer чтобы убедиться, что они запускаются только после загрузки DOM ( <script type="text/javascript" src="path/to/script1.js" defer></script> ). Если вы все еще хотите, чтобы ваш код работал в IE <10, не забудьте обернуть свой код в window.onload даже, хотя!





html