Apakah salah menempatkan tag <script> setelah tag </body>?

219

Betapa salahnya menempatkan tag skrip setelah tag penutup body ( </body>). ?

<html>
  ....
  <body>
     ....
  </body>
  <script type="text/javascript" src="theJs.js"></script>
</html>
javascript html DanC
sumber
1
Apakah ada dukungan untuk itu di browser modern.
Xdrone
Kemungkinan duplikat di mana saya harus menaruh tag <script> di markup HTML?
mapto

Jawaban:

191

Itu tidak akan memvalidasi di luar tag <body>atau <head>. Itu juga tidak akan membuat banyak perbedaan - kecuali jika Anda melakukan manipulasi DOM yang dapat merusak IE sebelum elemen tubuh dimuat penuh - untuk meletakkannya tepat sebelum penutupan </body>.

<html>
  ....
  <body>
     ....
     <script type="text/javascript" src="theJs.js"></script>
  </body>
</html>
Andy E
sumber
13
@epalla: jika Anda meletakkan skrip tepat di ujung tag tubuh, tidak ada konten lain yang akan dimuat saat ia sampai di sana, jadi seharusnya ada sedikit perbedaan antara menempatkannya di luar atau di dalam. Anda kemudian memiliki manfaat tambahan dari halaman Anda yang masih divalidasi, yang merupakan poin yang saya coba sampaikan dalam jawaban saya.
Andy E
1
Yap, saya setuju dengan Anda karena jawaban Anda baik. Saya hanya ingin menambahkan bahwa ada alasan untuk menempatkan JS di bagian bawah halaman alih-alih di kepala seperti yang telah kami lakukan sejak lama.
Matt Brunmeier
3
@PHPst: baik, kode yang tidak valid dapat dikenakan efek samping pada browser tertentu. Either way, saya tidak melihat bagaimana lekukannya menjadi satu tab-lebar kurang dari kode di atasnya membuatnya terlihat lebih bersih.
Andy E
1
@ PHPst: Saya berharap browser untuk mengatasinya jika Anda benar-benar ingin menulis kode Anda seperti itu. Saya tetap merekomendasikan penulisan kode Anda untuk memvalidasi.
Andy E
1
@ technosaurus: selalu ada <script src="..." defer>, yang berfungsi di semua browser utama (meskipun dengan bug yang berpotensi pecah di IE9 dan lebih rendah).
Andy E
88

Iya. Hanya komentar dan tag akhir untuk elemen html diizinkan setelah tag akhir untuk tubuh.

Browser mungkin melakukan pemulihan kesalahan, tetapi Anda tidak boleh bergantung pada itu.

Quentin
sumber
12
Ini jawaban yang lebih baik. Ada terlalu banyak browser baru di luar sana dengan ponsel yang ikut bermain untuk mengambil risiko melakukan kesalahan ketika Anda harus memotong dan menempelkan satu tag penutup.
Erik Reppen
33

Seperti yang Andy katakan, dokumen itu tidak valid, tetapi skrip tetap akan ditafsirkan. Lihat cuplikan dari WebKit misalnya:

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
sumber
11
"Dukungan untuk html yang benar-benar rusak." - Saya pikir itu mengatakan semuanya.
Diogo Kollross
8

IE tidak mengizinkan ini lagi (karena Versi 10, saya percaya) dan akan mengabaikan skrip tersebut. FF dan Chrome masih menoleransi mereka, tetapi ada kemungkinan bahwa suatu hari mereka akan menjatuhkan ini sebagai non-standar.

Bronx
sumber
1
Namun Google melakukan ini dalam contoh mereka tentang cara melakukan masuk G +, dengan "terakhir diperbarui 10 April 2014". Saya mendapatkannya dari versi untuk Java di server ( developers.google.com/+/quickstart/java ) tetapi mungkin itu adalah HTML + js yang sama untuk semua.
Tom
2

Secara prosedural masukkan "elemen script" setelah "elemen body" adalah "parse error" dengan proses yang direkomendasikan oleh W3C . Di "Konstruksi Pohon" buat kesalahan dan jalankan "tokenize lagi" untuk memproses konten itu. Jadi ini seperti langkah tambahan. Hanya dengan demikian dapat dijalankan "Eksekusi Skrip" - lihat proses skema .

Ada lagi "kesalahan parse". Alihkan "mode penyisipan" ke "in body" dan proses ulang token.

Secara teknis oleh browser itu proses internal, bagaimana mereka menandai dan mengoptimalkannya.

Saya harap saya membantu seseorang.

BG Bruno
sumber
0

Iya. Tetapi jika Anda menambahkan kode di luar itu kemungkinan besar tidak akan menjadi akhir dunia karena sebagian besar browser akan memperbaikinya, tetapi itu masih merupakan praktik yang buruk untuk masuk.

Taylor Satula
sumber
0

Google sebenarnya merekomendasikan ini sehubungan dengan 'Optimasi CSS'. Mereka merekomendasikan in-lining kritis di atas lipat gaya dan menunda sisanya (file css).

Contoh:

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

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

Donald Porter
sumber
8
Anda tidak seharusnya meletakkan barang di luar bodyelemen. Artikel Google itu tidak menyarankan siapa pun untuk melakukan hal seperti itu.
ChaseMoskal
2
Saya takut bahwa halaman google mengatakan sebenarnya persis seperti itu.
10us
6
Sepertinya pada suatu waktu, halaman itu memang merekomendasikan hal seperti itu, tetapi tidak lagi. (Sekarang ada beberapa pemuatan dinamis dengan javascript.) Versi Jerman tidak mutakhir dan masih berisi contoh kode lama.
Bodo
1
"element noscript" juga harus oleh RFC di dalam "element html" dan "element body"
BG Bruno
0

Browser modern akan mengambil tag skrip di dalam tubuh seperti:

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

Pada dasarnya, ini berarti bahwa skrip akan dimuat setelah halaman selesai, yang mungkin berguna dalam kasus-kasus tertentu (yaitu manipulasi DOM). Namun, saya sangat menyarankan Anda mengambil skrip yang sama dan meletakkannya di tag kepala dengan "menunda", karena akan memberikan efek yang sama.

<head>
    <script src="scripts/main.js" defer></script>
</head>
Iklan Amal
sumber
Apa yang akan berguna adalah jika scripttag memiliki eventatribut yang dapat didefinisikan untuk menentukan kapan mem-parsing skrip. Jadi, Anda harus event="load" event="DOMContentLoaded"menjalankan skrip setelah DOM dibuat atau event="beforeunload"di beforeunloadacara jendela . Contoh <script src="scripts/main.js" event="DOMContentLoaded"></script>,.
1,21 gigawatt