<script>タグを</ body>タグの後に配置するのは間違っていますか?


219

本文(</body>)の終了タグの後にスクリプトタグを配置するのはどのくらい間違っていますか。?

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

1
最新のブラウザでのサポートはありますか?
Xdrone 2014

回答:


191

またはタグの外側では検証されません。また、body要素が完全に読み込まれる前にIEを破壊する可能性のあるDOM操作を行わない限り、それがcloseの直前に置かれることにも大きな違いはありません。<body><head></body>

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

13
@epalla:スクリプトをbodyタグの最後に置くと、そこに到達するまでにロードするコンテンツが残っていないため、外側に配置するか、内側に配置するかでほとんど違いがありません。次に、ページを検証するという追加の利点があります。これは、私が私の回答で試みようとしていた点です。
アンディE

1
ええ、あなたの答えが良いので私はあなたに同意しました。長い間行ってきたように、JSを先頭ではなくページの下部に配置する理由があることを付け加えたいだけです。
Matt Brunmeier、2014年

3
@PHPst:まあ、無効なコードは特定のブラウザで副作用の影響を受ける可能性があります。いずれにせよ、インデントが上記のコードよりもタブ幅が1つ少ないため、見た目がきれいに見えません。
アンディE

1
@PHPst:あなたが本当にあなたのコードをそのように書きたいのであれば、ブラウザがそれに対応することを期待します。ただし、検証するコードを作成することをお勧めします。
アンディE

1
@technosaurus:が常にあり<script src="..." defer>、すべての主要なブラウザで動作します(ただし、IE9以下のバグが壊れる可能性があります)。
Andy E

88

はい。本文の終了タグの後には、コメントとhtml要素の終了タグのみを使用できます。

ブラウザーはエラー回復を実行する可能性がありますが、それに依存するべきではありません。


12
これはより良い答えです。新しいブラウザが多すぎてモバイルが登場し、1つの終了タグをカットアンドペーストするだけで間違ってしまう危険があります。
エリック・レッペン、2012年

33

以下のようアンディは言った文書が有効ではないだろうが、それにもかかわらず、スクリプトがまだ解釈されます。たとえば、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のサポート。」-それはすべてを語っていると思います。
Diogo Kollross 16

8

IEはこれを許可しなくなり(バージョン10以降)、そのようなスクリプトは無視されます。FFとChromeはまだそれらを許容しますが、いつか非標準としてこれを落とす可能性があります。


1
それでも、GoogleはG +サインインの方法の例でこれを行い、「2014年4月10日最終更新」を使用しています。サーバー上のJavaのバージョン(developers.google.com/+/quickstart/java)から取得しましたが、おそらくすべてのユーザーに対して同じHTML + jsです。
トム

2

W3Cの推奨プロセスにより、「要素本体」の後に「要素スクリプト」を「解析エラー」として手続き的に挿入します。「Tree Construction」でエラーを作成し、「tokenize again」を実行してそのコンテンツを処理します。つまり、追加のステップのようなものです。その後でのみ、「スクリプト実行」を実行できます- スキームプロセスを参照してください。

それ以外の場合は「解析エラー」。「挿入モード」を「本文」に切り替え、トークンを再処理します。

技術的にはブラウザによって、それは内部プロセスであり、どのようにマークし、最適化するかです。

私は誰かを助けたいと思います。


0

はい。しかし、コードをコードの外に追加した場合、ほとんどのブラウザーがそれを修正するため、世界の終わりではない可能性が高くなりますが、それでも侵入するのは悪い習慣です。


0

「CSSの最適化」に関して、Googleは実際にこれを推奨しています。彼らは重要なスクロールせずに見えるスタイルをインライン化し、残り(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


8
body要素の外にものを置くことは想定されていません。そのグーグルの記事はそのようなことをするように誰にも助言しません。
ChaseMoskal 2014

2
私はそのグーグルページが実際にそれを正確に言っていることを恐れています。
2015

6
かつて、そのページそのようなことを推奨していたようですが、もう推奨されていません。(現在、javascriptを使用した動的ロードがあります。)ドイツ語バージョンは最新ではなく、古いコード例がまだ含まれています。
ボードー

1
「element noscript」もRFCの「element html」と「element body」内にある必要があります
BG Bruno

0

最近のブラウザーは、次のように本文のスクリプトタグを受け取ります。

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

基本的には、ページが終了するとスクリプトが読み込まれることを意味します。これは、特定のケース(つまりDOM操作)で役立つ場合があります。ただし、同じ効果が得られるため、同じスクリプトを使用して「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ギガワット
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.