1. ホーム
  2. javascript

[解決済み] htmlのbodyとheadのどちらにscriptを書けばいいのでしょうか?重複

2022-05-04 02:37:38

質問

私は両方の方法を見たことがありますが、構造が少し違うだけで、どちらの実装も機能します。あなたの経験では、どちらがよりうまく機能しますか?

解決方法は?

私はこれに複数の選択肢で答えたいと思います。そのうちのいくつかは実際にボディでレンダリングされます。

  • jQueryライブラリなどのライブラリスクリプトをheadセクションに配置する。
  • パフォーマンスやページロードの問題にならない限り、通常のスクリプトをheadに配置します。
  • インクルードに関連するスクリプトは、そのインクルード内およびインクルードの最後に配置します。 この例として、asp.netのページにおける.ascxユーザーコントロールがあります。
  • ページのレンダリングに影響を与えるスクリプトは、ボディの最後(ボディクロージャの前)に配置します。
  • のようなマークアップの中にスクリプトを置かないでください。 <input onclick="myfunction()"/> - 代わりに、スクリプト本体のイベントハンドラ内に配置することをお勧めします。
  • 判断がつかない場合は、ページブロックの問題など、しない理由があるまで、headに置く。

脚注:"When you need it and not prior"は、ページブロック(知覚的読み込み速度)時の最後の項目に適用されます。ユーザーの認識 より速くロードされると認識されれば、より速くロードされます(たとえ、コードの中でまだ何かが起こっているとしても)。

EDIT: 参考文献を紹介します。

補足:マークアップ内にスクリプトブロックを配置すると、特定のブラウザではスペースを取ってレイアウトに影響を与えることがあります(IE7とオペラ9.2はこの問題があることが知られています)ので、hidden divに配置します(以下のようなcssクラスを使ってください。 .hide { display: none; visibility: hidden; } をつける)

規格です。規格では、スクリプトブロックは事実上どこにでも配置できることに留意してください。 http://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html http://www.w3.org/TR/xhtml11/xhtml11_dtd.html

EDIT2: 可能な限り(常に?)、実際のJavascriptを外部ファイルに置き、それらを参照することに注意してください - これは適切なシーケンスの有効性を変更するものではありません。