[解決済み] 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: 参考文献を紹介します。
- asp.netのディスカッション。 http://west-wind.com/weblog/posts/154797.aspx とこちらをご覧ください。 http://msdn.microsoft.com/en-us/library/3hc29e2a.aspx
- jQueryドキュメントレディのディスカッション。 http://encosia.com/2010/08/18/dont-let-jquerys-document-ready-slow-you-down/?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+Encosia+%28Encosia%29
- この質問に対する他の回答も有効な情報である。
- www.google.com と www.bing.com を使って関連情報を検索する(参考文献はたくさんある)
補足:マークアップ内にスクリプトブロックを配置すると、特定のブラウザではスペースを取ってレイアウトに影響を与えることがあります(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を外部ファイルに置き、それらを参照することに注意してください - これは適切なシーケンスの有効性を変更するものではありません。
関連
-
jQueryのコピーオブジェクトの説明
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
[解決済み] なぜGoogleはJSONレスポンスにwhile(1);を前置するのでしょうか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み】JavaScriptの関数にデフォルトのパラメータ値を設定する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
fetch ネットワークリクエストラッパーの説明例
-
Vue+ElementUIによる大規模なフォームの処理例
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み】TypeErrorの解決方法。未定義またはヌルをオブジェクトに変換できない
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
nullのプロパティinnerHTMLを読み取れません エラーメッセージ
-
OSSアップロードエラーを解決する: net::ERR_SSL_PROTOCOL_ERROR
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み】HTMLファイルのどこにJavaScriptを配置するか?