JavaScriptの位置:ヘッダvs. フッター[自体整理用】

Last Updated:2023年07月17日| , | コメントを残す

JavaScriptをヘッダとフッタに位置させることの違いは何だろうか? ザバススクリプトコードをヘッダとフッタのどこに位置するさせることが良いか?

フッターにはJavaScriptを位置させる理由

JavaScriptをヘッダとフッタに配置することの違いについてJavascript in header vs footer「文を参考にすることができる。

Javascript should be placed in footer of html document wherever possible。 For libraries like jQuery we do not often have a choice as there may be some other javascript code which depends on that。 But we should design site in such a way that maximum javascript code is placed in the end。

Javascriptが可能な場合は常にhtml文書のフッター(footer)に位置させなければならない。 jQueryのようなライブラリは、多くの場合、これらのライブラリが別のJavaScriptに依存することができ、ユーザーが選択がないことがありますが、可能な限り、JavaScriptコードは、最後に位置させるようにサイトを設計しなければならない。

さて、スクリプトでのCSSスタイルとHTMLの生成/編集がある場合がありますので、JavaScriptを実行すると、HTMLページのレンダリングをブロックする。 したがって、JavaScriptが以降のHTMLをレンダリングする前に、ブラウザは、JavaScriptを全体が実行されるまで待つ。

JavaScriptの位置:ヘッダvs. フッター
ヘッダに位置させたJavaScriptのコード。

JavaScriptをフッターに位置させると、Javaスクリプトの前にコンテンツを処理するためHTMLレンダリングがより速い。 しかし、どちらの場合もページ全体の実行時間は同じである。

"inserting Jquery in the header or footer?"(Reddit):

If the page requires the script to be loaded in order to render the content、then declaring it in the head is fine。

Declaring it at the end of the body is related to the architecture design where the page content can render with markup(html)and styling(css)only and the loading of scripts are to enhance the user experience in the page。

Loading scripts can cause some delay in rendering the page、so if you can design the page to render without them、then users can reach your content quicker and loading them at the end of the body would be preferred。

ページがコンテンツをレンダリングするためにスクリプトをロードする必要がある場合には、ヘッダで宣言するのが良い。

本文(body)の端で宣言することは、ページのコンテンツがマークアップ(html)とスタイリング(css)だけでレンダリングすることができ、スクリプトの読み込みをページで、ユーザー体験を向上させるための場合のアーキテクチャの設計と関連している。

スクリプトをロードすると、ページのレンダリングを多少遅らせることができるので、スクリプトなしでレンダリングするようにページをデザインすることができれば、ユーザー(訪問者)は、コンテンツの高速アクセスが可能になり、この場合、bodyの端からロードすることがよいことがあります。

Where should jQuery code go in header or footer? (jQueryのコードをヘッダとフッタのどこ置き場所は?)

It's always a good practice to add jQuery code in footer ie just before the closing tag。 If you have not done that、then use the defer attribute。

Use defer attribute so the web browser knows to download your scripts after the HTML downloaded -

jQueryのコードをフッター、すなわち終了タグ(closing tag)のすぐ前に追加することが常に良い慣行である。 このようにしていなかっdefer属性を使用してください。

WebブラウザがHTMLをダウンロードした後、スクリプトをダウンロードするようにdefer属性を使用するようにしてください。

まとめ

個人的に参照できるように、スクリプトをヘッダーとフッターに位置させることと関連し文を見つけて、ここにまとめてみた。

インサイドジャバスクリプトInside JavaScript:主要な概念と原則を正確に。 jQuery Node.js閉鎖の概念までをはじめ、JavaScriptの関連本を何冊購入しましたが、時間がないという言い訳にほぼ読まをできずにいる。 少しずつでも時間を割いて勉強をしよう。

メモ:


コメントを残す

コメント