1
htmlページの下部にある技術的に配置されたスクリプトはJavaScript Best Practiceです。 しかし、私はいくつかのスクリプトがページ上部のAngularのように呼び出されるべきなのか混乱しています。 Angularライクなライブラリを使用するとJavaScriptのベストプラクティスが壊れていますか？スクリプトファイルの配置場所と混乱するJavaScript
説明がありますか？
A
答えて
2
技術的には、スクリプトファイルのシーケンシャルロードに「あまり気にしない」ことが重要です。ライブラリを呼び出す前にまずライブラリが必要だと分かりました。したがって、HTMLがロードされた後に、カスタムスクリプトをすべてロードするので、その特定のDOM loadedイベントを処理する必要はなく、render blocking scriptsに対処する必要はありません。単純にheadタグにすべて入れる。
しかし、JavaScriptライブラリは実際に完全に読み込む必要がある依存関係です。技術的には、小規模なバンドでも（あるいは最近ではそれを低速のスマートフォンと比較する）。また、httpプロトコルを使用すると、2つの要求を同時にダウンロードできます。
この情報を念頭に置いて、のベストプラクティスは、asyncのモードを頭文字タグからロードした1つのバンドルスクリプトファイルです。 grunt/gulpの設定や何らかの仕分けで達成できます。
<head>
<title></title>
<script src='path-to-bundled-script.js' async='async' />
</head>
async属性は、ページの読み込みが完全にロードされるように、このスクリプトに待機しませんを確認します。これは複数のHTTPリクエストで待機します。したがって、順次実行のためのバンドルが必要です。
開発中で、このバンドルのgrunt/gulp設定が完了していないと、ライブラリがロードされていないか、シンボルが認識されないというエラーが表示されます。
これを解決するには、属性deferを使用できます。
defer属性を使用すると、ページの読み込みはスクリプトが実行されるまで待機しますが、HTMLが完全に読み込まれるまで待機しません。この技術を使用して
、あなたがベストプラクティスとして、閉鎖体タグを忘れることができますし、Googleのpagespeed insight
0
本当に、ロードするページの内容（プルするデータ）によって異なります。ほとんどが静的でAngularJSバインディングが少ない場合は、それを下部に配置する方がよいでしょう。しかし、完全に動的なコンテンツの場合、例えばRESTful Webサービスのように、AngularJSをページ上部にロードしたいとします。 私たちがいくつかのデータ（バインディング）を頂点に配置する必要がある場合、ロジックは単純です。
ベストプラクティスとテスト可能な速度を得るでしょうが_guidelines_、ないルールです。 – Tushar
それは問題ではありません。 Angularはページをロードするので、JSがロードされるのを待たなければなりません。あなたがそれらを一番下に置く理由は、ページの読み込み待ち時間が増えないようにするためです。 – Randy
@Tusharチップのおかげで。 @Randy。 – DININDU