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

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

Odpowiedzi: