Встраивать JavaScript в тело HTML - плохая практика?

Question 1

Команда, над которой я работаю, приобрела привычку использовать <script>теги в случайных местах тела наших HTML-страниц. Например:

<html>
    <head></head>
    <body>
        <div id="some-div">
            <script type="text/javascript">//some javascript here</script>
        </div>
    </body>
</html>

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

Я ошибся? Насколько плохо, что мы помещаем теги сценария в теги div, как это? Есть ли какие-либо проблемы совместимости браузера, о которых мне следует знать?

Question 2

Это совершенно верно.

Вы бы не хотели помещать туда большие блоки кода, смешанные в разметке (лучше использовать внешние скрипты), но это может быть полезно для:

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

Возможно, вы думаете об <style>элементах, которые нельзя использовать <body>(хотя большинство браузеров, тем не менее, это допускают).

Question 3

На самом деле это довольно распространенное явление. Например , код отслеживания Google Analytics использует именно такой синтаксис:

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

Если этого достаточно для Google ...

Question 4

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

Question 5

Как отметили несколько человек, это действительно так, это работает и широко используется.

Наилучшая практика с точки зрения семантики (или, по крайней мере, используемой для рекомендаций) заключается в размещении тегов сценария внутри заголовка.

Более современные передовые методы, учитывающие производительность, рекомендуют размещать теги сценария (внешние и встроенные) в правом нижнем углу перед тегом body, чтобы разметка полностью отображалась до выполнения любого кода JavaScript.

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

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

Question 6

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

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

<div id="foo">
  <script type="text/javascript">
    document.getElementById("foo")... // do something to it
  </script>
</div>

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

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

Question 7

Это действительно так!

Вы можете использовать:

<script type="text/javascript">
    //<![CDATA[

    // Some JavaScript code that perfectly validates in the W3C validator

    //]]>
</script>

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

Question 8

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

Это действительно, но не рекомендуется (или не рекомендуется).

Я ошибся? Насколько плохо, что мы помещаем теги сценария в теги div, как это? Есть ли какие-либо проблемы совместимости браузера, о которых мне следует знать?

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

Добавляет вес страницы
Сложность (или, вероятно, невозможность) минификации
Невозможно перенести или использовать для других страниц
Не может быть кэширован (необходимо загружать каждый раз при загрузке страницы)
Нет разделения проблем (сложнее поддерживать)

Question 9

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

Поэтому вместо того, чтобы «если вы собираетесь использовать этот HTML, убедитесь, что вы импортируете xyz.js», вы можете просто включить HTML и покончить с ним.

Так что это не обязательно ужасное зло. Возможно, не очень впечатляюще, но и не совсем ужасно. Это вроде как зависит от намерения.

Question 10

См. Передовой опыт в пользовательском интерфейсе Yahoo: http://developer.yahoo.com/performance/rules.html (JavaScript внизу страницы)

Question 11

Это определенно законно; Я видел это, например, на нескольких страницах здесь, на Exforsys .

Теперь это обучающий сайт, демонстрирующий основы HTML и JavaScript, так что в этом контексте он совершенно понятен. Однако я бы не хотел видеть это в производственном коде для чего-то большего, чем просто пару операторов. Не видя, что вы заменили, // Some JavaScript code hereя бы не хотел комментировать.

Однако с этим не должно быть проблем с браузером.

Question 12

Допускается добавление <script> body, но Internet Explorer это очень не нравится. Поэтому, чтобы быть в большей безопасности, убедитесь, что ваши скрипты находятся внутри тега <head>.

Это действительно создавало хаос (особенно для Internet Explorer) в проекте, над которым мы работаем.

Question 13

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

Я бы не сказал, что есть что-то плохое в том, чтобы делать это, когда АБСОЛЮТНО НЕОБХОДИМО (если это в блоке CDATA), но помимо этого я бы рекомендовал вашей команде использовать библиотеку сценариев, такую как Prototype или jQuery, и сохранить сценарии, внешние по отношению к странице. Обычно это чище, и библиотеки иногда заставляют немного чистить код, чего, я готов поспорить, в настоящее время не происходит.

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

Question 14

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

В конечном итоге в веб-разработке самое важное - выпустить продукт!

Question 15

Это совершенно верно, хотя может ухудшить ремонтопригодность. См. Также Где я должен помещать теги <script> в разметку HTML? и Почему не удается вызвать эту функцию jQuery в Firefox? .

Question 16

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

Question 17

Если у вас есть редактор, который может одновременно обрабатывать синтаксис HTML и JavaScript. И если вам нравится сначала прочитать несколько строк HTML, а затем JavaScript cpde ... конечно. Действуй.

Question 18

Несколько вещей:

Это полностью корректный код.
Это совершенно не рекомендуется.

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

Купите и прочтите High Performance JavaScript . Это изменит способ написания кода JavaScript.