Каково лучшее место, чтобы размещать tag <scripts src = “”> в HTML?

У меня недавно была проблема, назвав scripts JQuery в маленьком рукописном шрифте php, в общем я размещаю их после этикетки body такая:




  
  
  JS Bin






Это, чтобы избегать того, чтобы был отсрочен груз остальных элементов страницы.

Проблема состоит в том, что он делал вид template с 3 файлами php:

  1. header.php
  2. menus.php
  3. footer.php

В header я называю все элементы head, например css, meta, title; в меню я верю в меню, которое будет видимым на всех страницах, и в footer у меня есть нога страницы и tag

Это плохое:

</body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

scripts, из-за общей нормы должны размещаться перед завершением body. Однако, есть особенные случаи, где уместно помещать их в header.

Каков процесс renderizado документа HTML?

  1. Parseo документа
  2. Найди этикетку script с одной внешний файл. 2.1 Загружает рукописный шрифт и останавливает груз документа до тех пор, пока рукописный шрифт не будет полностью нагруженным.
  3. Работают scripts.
  4. Закончи груз документа.

Когда использовать async/defer?

Async он позволяет тебе загружать рукописный шрифт asíncronamente, а именно, он не останавливает груз документа и выполнен хорошо даже не нагружен.

Давайте предполагать следующую сцену:

<script async src="jquery.min.js"></script>
<script async src="bootstrap.min.js"></script>

В этом случае, bootstrap смоги работать нежели jquery.

Defer также он не bloqueante, но в отличие от async да уважай порядок scripts.

Когда правильно помещать scripts в header?

Обычная практика состоит в том, чтобы помещать также scripts в header с async или defer, таким образом, scripts получены немедленно, когда он начинает parseo, но не блокируя того же самого.

11
ответ дан 24.11.2019, 13:17

Для меня, в этом моменте лучше помещать их перед завершением этикетки body поскольку о нем упоминают в ответе

Просто по разуму, async он только вынесен в Internet Explorer 10+ следовательно есть много пользователь, который у них могли быть проблемы, абзац - функция HTML5 следовательно какие-то старые браузеры также окажутся поврежденными.

Ясно, что в какие-то годы это не будет иметь значение, из-за которого пользователи IE вероятно происходите в Microsoft Edge где уже он вынесен, включен updates в другие браузеры, просто уже он не оправдается.

С другой стороны, если у тебя есть проблемы с книжными магазинами как jQuery, ты был бы должен проверять output твоей страницы, конечно он работает немного где нет.

Поскольку я использую мою тесьму, у меня есть секция стилей и 3 для scripts, imports, ready, functions

  1. imports, где я добавляю <script src ...

  2. ready, где есть один document.ready это, чтобы только иметь один всегда.

  3. functions, если есть какая-то функция, которую он не хотел бы поместить внутри какого-то js из-за x или и разум

Я надеюсь, что он помогает тебе

9
ответ дан 24.11.2019, 13:17

Интеграция JavaScript и XHTML он очень гибкий, так как существуют по крайней мере три формы, чтобы включать код JavaScript на веб-страницах.

Включать язык сценариев JavaScript в тот же документ XHTML

Код JavaScript он замыкается между этикетками <script> и он включается в любую часть документа. Хотя правильно включать любой блок кода в любой зоне страницы, рекомендует определять код JavaScript внутри заголовка документа (внутри этикетки <head>):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript">
  alert("Un mensaje de prueba");
</script>
</head>

<body>
<p>Un párrafo de texto.</p>
</body>
</html>

Для того, чтобы страница вытекающий XHTML была действительной, необходимо добавлять признак type в этикетку <script>. Стоимость, которая включается в признак type они стандартизированы и для случая JavaScript, правильная стоимость text/javascript.

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

Главный недостаток состоит в том, что, если хочется делать изменение в блоке кода, необходимо изменять все страницы, которые включают этот же самый блок кода JavaScript.

Определять язык сценариев JavaScript во внешнем файле

Инструкции язык сценариев JavaScript могут включаться во внешний файл типа JavaScript что документы XHTML они соединяют посредством этикетки <script>. Могут быть созданы все файлы JavaScript что были необходимы и каждый документ XHTML смоги соединять столько файлов JavaScript поскольку я нуждался.

Пример:

Файл codigo.js

alert("Un mensaje de prueba");

Документ XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript" src="/js/codigo.js"></script>
</head>

<body>
<p>Un párrafo de texto.</p>
</body>
</html>

Кроме признака type, этот метод требует определять признак src, что является тем, что он показывает URL соответствующий файлу JavaScript что хочется соединять. Каждая этикетка <script> только смоги соединять единственный файл, но на той же странице могут включаться столько этикеток <script> поскольку они были необходимы.

Файлы типа JavaScript это нормальные документы текста с расширением .js, что могут быть созданы любым текстовым редактором как Notepad, Wordpad, EmEditor, UltraEdit, Vi, и т.д.

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

Включать язык сценариев JavaScript в элементы XHTML

Вышеупомянутый метод - наименее использованный, так как он состоит во включении кусков JavaScript внутри кода XHTML страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
</head>

<body>
<p onclick="alert('Un mensaje de prueba')">Un párrafo de texto.</p>
</body>
</html>

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

7
ответ дан 24.11.2019, 13:17

Есть теории для всего вкуса. Мне лично, нравится помещать их больше перед этикеткой </body>

Один из мотивов, дело в том, что, хотя он не удастся, кодирование javascript, страница идет грузить так или иначе, хотя иногда, я был должен загружать это в head, потому что а страница била козырем меня

4
ответ дан 24.11.2019, 13:17

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

В xHTML элементы script они были бы должны размещаться внутри элемента head. Начиная с HTML 5 менее ограничительный и может размещаться, где он любил; рекомендует помещать их как последние элементы, это позволяет, что весь DOM был загружен перед тем, как пробовать ничего не выполнять, и делает не стоящие внимания методы как ready().

Использовать свойства defer или async они это не решат, ты они задерживают груз элемента, которого они касаются.

Твоя проблема происходит из-за порядка груза / выполнения: у тебя есть какой-то фрагмент кода, который пробует использовать прозвище jQuery ($) до того, как был загружен сам jQuery. Размещает оставшуюся часть твоего кода язык сценариев JavaScript после груза jQuery.

Вред более полный образец твоего кода, если ты не можешь решить это.

4
ответ дан 24.11.2019, 13:17

Лучше всего всегда он состоит в том, чтобы размещать "scripts" перед завершением "body" и после всего твоего HTML-контента div, в, span, и т.д., благодаря тому, что в общем ты делаешь названный к элементам из-за идентификации или Класса, и они должны быть загруженными перед тем, как начинать выполнять.

Другая вещь, которую ты также должен принимать во внимание во время включения твоих "scripts", состоит в том, чтобы размещать зависимости сначала, например

...

</div><! Cierre de tu último tag HTML de contenido -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="script-que-usa-jquery-como-dependencia.js"></script>
</body>
</html>

С этим ты предотвратишь сообщение

$ не определен

благодаря тому, что jquery он будет грузить перед тем, как начинать выполнять "рукописный шрифт - que-usa-jquery-como-dependencia.js".

3
ответ дан 03.12.2019, 20:12

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

В мой опыт он состоит в том, чтобы помещать .css в <head> и .js в конце <body> сходный со следующим

<head>
<link href="mynew.css" rel="stylesheet" type="text/css" />
</head>
<body>
... mi html
<script src="myJavaScript.js" type="text/javascript"></script>
<body>

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

Также я комментирую, что, если тебе удается быть нужно, чтобы работала функция, открыв страницу, он может включать js вышеупомянутой функции в head.

Я надеюсь, что он служит тебе помощью.

3
ответ дан 03.12.2019, 20:12

Теги

Похожие вопросы