Чи неправильно розміщувати тег <script> після тегу </body>?

224

Наскільки неправильно розміщувати тег сценарію після закриваючого тегу body ( </body>). ?

<html>
  ....
  <body>
     ....
  </body>
  <script type="text/javascript" src="theJs.js"></script>
</html>

javascript html

— DanC
джерело

1

Чи є для нього підтримка в сучасних браузерах.

— Xdrone

Можливий дублікат Де слід розміщувати теги <script> у розмітці HTML?

— mapto

193

Він не перевірятиметься поза тегами <body>або <head>. Це також не матиме великої різниці - якщо ви не робите маніпуляції з DOM, які можуть зламати IE до повного завантаження елемента body - до його розміщення безпосередньо перед закриттям </body>.

<html>
  ....
  <body>
     ....
     <script type="text/javascript" src="theJs.js"></script>
  </body>
</html>

— Енді Е
джерело

13

@epalla: якщо ви помістите скрипт прямо в кінець тегу body, до моменту його потрапляння не залишиться жодного вмісту, тому між розміщенням його зовні або просто всередині має бути невелика різниця. Тоді у вас є додаткова перевага вашої сторінки, яка все ще перевіряється, і саме це я намагався зробити у своїй відповіді.

— Andy E,

1

Так, я погодився з вами, оскільки ваша відповідь хороша. Я просто хотів додати, що є причина розміщувати JS внизу сторінки, а не в голові, як це робилося давно.

— Matt Brunmeier

3

@PHPst: ну, недійсний код може спричинити побічні ефекти в певних браузерах. У будь-якому випадку, я не бачу, як його відступ на одну ширину табуляції менше коду над ним, робить його чистішим.

— Andy E,

1

@PHPst: Я очікував би, що браузери з цим впораються, якщо ви дійсно хочете написати свій код таким чином. Однак я все-таки рекомендую написати свій код для перевірки.

— Andy E,

1

@technosaurus: завжди є <script src="..." defer>, що працює у всіх основних браузерах (хоча і з потенційно помилковою помилкою в IE9 і нижче).

— Andy E,

91

Так. Після кінцевого тегу для тіла допускаються лише коментарі та кінцевий тег для елемента html.

Браузери можуть виконувати відновлення помилок, але ви ніколи не повинні залежати від цього.

— Квентін
джерело

13

Це краща відповідь. Занадто багато нових браузерів із мобільними пристроями, що входять у гру, щоб ризикувати зробити це неправильно, коли все, що вам потрібно, вирізати та вставити один закривальний тег.

— Ерік Реппен

34

Як сказав Енді, документ буде недійсним, але тим не менше сценарій все одно буде інтерпретований. Дивіться фрагмент з WebKit, наприклад:

void HTMLParser::processCloseTag(Token* t)
{
    // Support for really broken html.
    // we never close the body tag, since some stupid web pages close it before 
    // the actual end of the doc.
    // let's rely on the end() call to close things.
    if (t->tagName == htmlTag || t->tagName == bodyTag 
                              || t->tagName == commentAtom)
        return;
    ...

— Віталій Федоренко
джерело

11

"Підтримка справді зламаного html." - Я думаю, це все говорить.

— Діого Колрос

8

IE більше не дозволяє цього (з версії 10, я вважаю) і буде ігнорувати такі сценарії. FF та Chrome все ще терплять їх, але є ймовірність, що колись вони відкинуть це як нестандартне.

— Бронкс
джерело

1

І все ж Google робить це на своєму прикладі, як ввійти в G +, "останнє оновлення 10 квітня 2014 року". Я отримав його з версії для Java на сервері ( developers.google.com/+/quickstart/java ), але, мабуть, це однаковий HTML + js для всіх.

— Том,

2

Процедурно вставляти "сценарій елемента" після "body element" є "помилка синтаксичного аналізу" за рекомендованим процесом W3C . У "Конструкції дерева" створіть помилку та запустіть "tokenize again" для обробки цього вмісту. Тож це як додатковий крок. Тільки тоді можна запустити "Виконання сценарію" - див. Схему процесу .

Інше "помилка синтаксичного аналізу". Переключіть «режим вставки» на «в тілі» та обробіть маркер.

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

Сподіваюся, я комусь допоміг.

— BG BRUNO
джерело

0

Так. Але якщо ви все-таки додасте код за його межами, швидше за все, це не буде кінцем світу, оскільки більшість браузерів це виправлять, але все одно це погана практика.

— Тейлор Сатула
джерело

0

Google насправді рекомендує це щодо "оптимізації CSS". Вони рекомендують вставляти критичні стилі, що перевертаються, та відкладати решту (файл CSS).

Приклад:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

Див .: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

— Дональд Портер
джерело

9

Ви не повинні класти речі поза bodyелементом. Ця стаття Google не радить нікому робити щось подібне.

— ChaseMoskal

2

Я боюся, що сторінка Google говорить насправді саме так.

— 10us

6

Схоже , що свого часу, що сторінка зробила рекомендувати таку річ, але не більше. (Зараз є деяке динамічне завантаження за допомогою javascript.) Німецька версія не оновлена, і все ще містить приклад старого коду.

— BODO

1

"елемент noscript" повинен бути RFC всередині "елемент html" і "тіло елемента" теж

— BG BRUNO

0

Сучасні браузери прийматимуть теги сценарію в тілі так:

<body>
    <script src="scripts/main.js"></script>
</body>

По суті, це означає, що сценарій буде завантажений після закінчення сторінки, що може бути корисним у певних випадках (а саме маніпулювання DOM). Однак я настійно рекомендую взяти той самий скрипт і помістити його в тег head з "defer", оскільки це дасть той самий ефект.

<head>
    <script src="scripts/main.js" defer></script>
</head>

— Благодійність реклами
джерело

Що було б корисно, якби scriptтеги мали eventатрибут, який можна було б визначити, щоб визначити, коли слід аналізувати сценарій. Отже, вам доведеться event="load" event="DOMContentLoaded"запустити сценарій після створення DOM або event="beforeunload"у beforeunloadвипадку вікна . Приклад, <script src="scripts/main.js" event="DOMContentLoaded"></script>.

— 1,21 гігават