29

どのJavaScriptをどこに含めるべきか混乱していますか？

例えば：

  • jQueryライブラリをどこに含める必要がありますか？<head>クロージング</body>エレメント内またはその前？

  • JavaScriptがの下部で定義されている場合<body>、本文でインラインで使用できますか？

  • 並列ダウンロードをブロックする場合、CSSが下部に含まれているとは言われないのはなぜですか？

4

2 に答える 2

23

CSS

CSSは、<head>Flash Of Unstyled Content（FOUC）を防ぐためにロードされます。これは、ページが一瞬スタイルなしで表示される状況です。それらをにロードすることは<head>、コンテンツがレンダリングされたときにページが完璧に見えるようにするための小さな犠牲です。

JS

一般的なケース：

JSは、いくつかの（ただし、以下に限定されない）理由で下部に読み込まれます。

  • 他のリソースのロードとページのレンダリングをブロックしないようにします。

  • JSの従来の使用法は、クライアント側の検証やマイナーな特殊効果などの拡張のためです。これらは通常オプションであり、ページの全体的な目的には影響しません。したがって、最後にロードされます。

  • コンテンツの後にスクリプトを追加すると、スクリプトによって参照される要素がすでにDOMにあるため、安全にアクセスできるようになります。

例外：

ただし、次のようなルールにはいくつかの例外があります。

  • Modernizrのような「飛行前ライブラリ」

    Modernizrは、<html>タグにクラスを適用して、JSおよびCSSの目的で使用できる機能の可用性を示します。これを遅らせると、クラスの追加によるスタイルの突然のシフトが発生する可能性があります。また、チェックが以前に行われなかったためにJSが破損する可能性があります。

  • LESS/SASSのようなCSSパーサーやスタイルに影響を与えるスクリプト

    リモートLESS/SASSスタイルはAJAXを介してロードされるため、スタイルの準備ができているかどうかに関係なく、ページがレンダリングされます。それらをヘッドにロードすると、FOUCを回避するために、できるだけ早くスタイルをロードするようになります。

  • RequireJSのような「ブートローダーライブラリ」は、他のスクリプトを並行してダウンロードするために、できるだけ早くロードする必要があります。

  • WebアプリにはプラットフォームとしてJSが必要です。これらのライブラリを頭の早い段階でロードすることをお勧めします。さらに、Webアプリでは、アプリが実行される前に最小限のページコンテンツがあります。

エッジケース：

ここでも言及する価値のあるスクリプトの2つの属性があり、それらはdeferとasyncです。

基本的に、のスクリプトタグdeferはDOMが解析された後にのみ実行され、スクリプトタグasyncは他の操作をブロックせずに非同期でスクリプトをロードするという考え方です。ヘッドでスクリプトを使用し、asyncそれらを並列にロードするために適用し、defer実行時にDOMの準備ができていることを確認できることを意味しますが、それぞれに独自の問題があります。

これは、それらが何であるかについて詳しく説明しているMDNドキュメントと、それらの履歴、サポート、および現在のステータスについてほぼ説明している回答です。

于 2012-05-19T03:02:12.030 に答える
11
于 2012-05-19T08:02:41.893 に答える