Czy źle jest umieścić tag <script> po tagu </body>?

219

Jak źle jest umieścić znacznik skryptu za znacznikiem zamykającym body ( </body>). ?

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

javascript html

— DanC
źródło

1

Czy jest to obsługiwane w nowoczesnych przeglądarkach?

— Xdrone

Możliwy duplikat Gdzie należy umieścić tagi <script> w znacznikach HTML?

— mapto

191

Nie będzie sprawdzać poprawności poza tagami <body>lub <head>. Nie będzie to również miało większego znaczenia - chyba że wykonujesz manipulacje DOM, które mogłyby uszkodzić IE przed pełnym załadowaniem elementu body - do umieszczenia go tuż przed zamknięciem </body>.

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

— Andy E.
źródło

13

@epalla: jeśli umieścisz skrypt bezpośrednio na końcu znacznika body, nie pozostanie żadna inna zawartość do załadowania, zanim się tam dostanie, więc nie powinno być różnicy między umieszczeniem go na zewnątrz lub w środku. Następnie zyskujesz dodatkową korzyść polegającą na tym, że twoja strona wciąż się sprawdza, o co właśnie starałem się wspomnieć w mojej odpowiedzi.

— Andy E

1

Tak, zgadzałem się z tobą, ponieważ twoja odpowiedź jest dobra. Chciałem tylko dodać, że istnieje powód, aby umieścić JS na dole strony zamiast w głowie, jak to robiliśmy od dłuższego czasu.

— Matt Brunmeier

3

@PHPst: cóż, nieprawidłowy kod może podlegać efektom ubocznym w niektórych przeglądarkach. Tak czy inaczej, nie widzę, w jaki sposób jego wcięcie jest o jedną szerokość tabulatora mniejsze niż kod powyżej, co sprawia, że wygląda na czystszy.

— Andy E

1

@PHPst: Oczekuję, że przeglądarki sobie z tym poradzą, jeśli naprawdę chcesz tak napisać kod. Nadal jednak zalecam napisanie kodu w celu sprawdzenia poprawności.

— Andy E

1

@technosaurus: zawsze istnieje <script src="..." defer>, który działa we wszystkich głównych przeglądarkach (choć z potencjalnie łamliwym błędem w IE9 i niższych).

— Andy E,

88

Tak. Tylko komentarze i znacznik końcowy elementu html są dozwolone po znaczniku końcowym dla treści.

Przeglądarki mogą wykonywać odzyskiwanie po błędzie, ale nigdy nie powinieneś na tym polegać.

— Quentin
źródło

12

To lepsza odpowiedź. Istnieje zbyt wiele nowych przeglądarek z telefonami komórkowymi, aby ryzykować popełnienie błędu, gdy wystarczy wyciąć i wkleić pojedynczy tag zamykający.

— Erik Reppen

33

Jak powiedział Andy , dokument nie będzie ważny, ale mimo to skrypt nadal będzie interpretowany. Zobacz fragment kodu z WebKit na przykład:

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;
    ...

— Vitalii Fedorenko
źródło

11

„Wsparcie dla naprawdę zepsutego HTML”. - Myślę, że to wszystko mówi.

— Diogo Kollross

8

IE już na to nie pozwala (jak sądzę od wersji 10) i zignoruje takie skrypty. FF i Chrome nadal je tolerują, ale są szanse, że pewnego dnia odrzucą to jako niestandardowe.

— Bronx
źródło

1

A jednak Google robi to w swoim przykładzie logowania się w Google+ za pomocą „ostatniej aktualizacji 10 kwietnia 2014 r.”. Mam go z wersji Java na serwerze ( developers.google.com/+/quickstart/java ), ale przypuszczalnie jest to ten sam HTML + js dla wszystkich.

— Tom

2

Proceduralnie wstaw „skrypt skryptu” po „treści elementu” to „błąd analizy” według zalecanego procesu przez W3C . W „Konstrukcji drzewa” utwórz błąd i uruchom „ponownie tokenizuj”, aby przetworzyć tę zawartość. To jest jak dodatkowy krok. Tylko wtedy można uruchomić „Wykonanie skryptu” - patrz proces schematu .

Cokolwiek innego „błąd analizy”. Przełącz „tryb wstawiania” na „w treści” i ponownie przetworz token.

Technicznie przez przeglądarkę jest to proces wewnętrzny, jak go zaznaczają i optymalizują.

Mam nadzieję, że komuś pomogłem.

— BG Bruno
źródło

0

Tak. Ale jeśli dodasz kod poza nim, najprawdopodobniej nie będzie to koniec świata, ponieważ większość przeglądarek to naprawi, ale nadal jest to zła praktyka.

— Taylor Satula
źródło

0

Google faktycznie zaleca to w odniesieniu do „Optymalizacji CSS”. Zalecają wstawianie krytycznych stylów z zakładaniem i odkładanie reszty (plik css).

Przykład:

<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>

Zobacz: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

— Donald Porter
źródło

8

Nie należy umieszczać rzeczy poza bodyelementem. Ten artykuł Google nie radzi nikomu robić takich rzeczy.

— ChaseMoskal

2

Obawiam się, że strona google mówi tak naprawdę dokładnie to.

— 10us

6

Wygląda na to, że kiedyś strona polecała coś takiego, ale już nie. (Teraz jest pewne ładowanie dynamiczne za pomocą javascript.) Wersja niemiecka jest nieaktualna i wciąż zawiera stary przykład kodu.

— Bodo

1

„element noscript” musi być również przez RFC wewnątrz „element html” i „element body”

— BG Bruno

0

Nowoczesne przeglądarki przyjmują znaczniki skryptów w treści w następujący sposób:

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

Zasadniczo oznacza to, że skrypt zostanie załadowany po zakończeniu strony, co może być przydatne w niektórych przypadkach (a mianowicie manipulacji DOM). Jednak zdecydowanie zalecam wzięcie tego samego skryptu i umieszczenie go w tagu head z opcją „defer”, ponieważ da to ten sam efekt.

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

— Reklama charytatywna
źródło

Przydałoby się, gdyby scripttagi miały eventatrybut, który można zdefiniować w celu ustalenia, kiedy należy przeanalizować skrypt. Musisz więc event="load" event="DOMContentLoaded"uruchomić skrypt po utworzeniu DOM lub event="beforeunload"w beforeunloadzdarzeniu okna . Przykładem <script src="scripts/main.js" event="DOMContentLoaded"></script>.

— 1,21 gigawatów