13

</body>javascriptがWebページのレンダリングをブロックするのを避けるために、すべてのJSファイル/コードをロード/実行するすべてのJSファイル/コードを終了タグの直前に配置することはできませんか？

すべてのJSファイルとコードは、すべてのページがレンダリングされた後にのみダウンロードおよび実行されるため、 JSファイルをロードするためのノンブロッキング手法についてこの記事で提案されているようなトリックが必要です。彼は基本的に次のようなコードを使用することを提案しています。

document.getElementsByTagName("head")[0].appendChild(script);

Webページをレンダリングさせながらスクリプトを延期するため、Webページのレンダリング速度が速くなります。

しかし、このタイプの非ブロッキング手法（または他の同様の手法）を使用せ</body>ずに、すべてのJSファイル（ロード/実行）を終了タグの前に配置するだけで、同じ非ブロッキング結果を達成できませんか？

</body>著者（同じ記事内）が終了タグの前にコードを配置することを提案しているので（記事の「スクリプトの配置」セクションを参照）、基本的に終了</body>タグの前にスクリプトをロードしているので、さらに驚いています。それでは、彼のコードの必要性は何ですか？

私は混乱しています、助けてくれてありがとう、ありがとう！

アップデート

参考までに、Google Analyticsは、同様の非ブロッキング手法を使用して追跡コードをロードしています。

<script type="text/javascript">
...
(function() 
{
   var ga = document.createElement('script');
   ga.type = 'text/javascript';
   ga.async = true;
   ga.src = 'your-script-name-here.js';
   var s = document.getElementsByTagName('script')[0];
   s.parentNode.insertBefore(ga, s); //why do they insert it before the 1st script instead of appending to body/head could be the hint for another question.
})();
</script>
</head>
4

3 に答える 3

1

一般的にノーと言います。ページのすべてのコンテンツの後にスクリプトが読み込まれる場合でも、スクリプトの読み込みと実行によってページがブロックされます。その理由は、スクリプトに書き込みコマンドが存在する可能性があるためです。

ただし、ページ コンテンツの読み込み速度だけを達成したい場合は、スクリプト タグをタグの直前に配置した結果は、</body>スクリプト タグを動的に作成した場合と同じになります。最も重要な違いは、スクリプトを共通の静的な方法でロードすると、スクリプトが 1 つずつ実行されることです。つまり、スクリプト ファイルの並列実行はありません (古いブラウザでは、スクリプトのダウンロードも同様です)。

于 2011-07-28T11:04:15.997 に答える
1

非同期スクリプトが必要な場合。 (HTML5) async タグが使用中のブラウザで利用できる場合は、それを使用します。これは、Google アナリティクスが投稿したコードで行っていることです (具体的には、行ga.async = true MDN リンク、下にスクロールして async を探します)。

ただし、これにより、ページの読み込み中に任意のタイミングでスクリプトが読み込まれる可能性があります。これは望ましくない場合があります。非同期の使用を選択する前に、次の質問を自問する価値があります。

ユーザー入力は必要ありませんか? 次に、非同期属性を使用します。

ボタンやナビゲーションに応答する必要がありますか? 次に、それらをページの上部 (head 内) に配置し、async タグを使用しないようにする必要があります。

非同期スクリプトは任意の順序で実行されるため、スクリプトが (たとえば) jQuery に依存しており、jQuery が別のタグに読み込まれている場合、スクリプトが jQuery スクリプトよりも先に実行され、エラーが発生する可能性があります。

body タグの一番下に物を置かないのはなぜですか? スクリプトの読み込みに十分な時間がかかり、ウェブサイトの読み込みが遅くなる/一時停止する場合、ウェブサイトの読み込み後にそのスクリプトがウェブサイトを一時停止/ハングさせる可能性は十分にあります (ブラウザーによって異なる動作が予想されます)。 Web サイトが応答しないように見える (ボタンをクリックしても何も起こらない)。ほとんどの場合、これは理想的ではないため、async 属性が考案されました。

または、スクリプトの読み込みに時間がかかる場合は、(テスト後に)スクリプトを縮小して連結してからサーバーに送信することをお勧めします。

縮小と連結にはrequire.jsを使用することをお勧めします。実行と使用が簡単です。

縮小すると、ダウンロードする必要があるデータの量が減ります。

スクリプトを連結すると、サーバーへの「往復」の回数が減ります (ping が 200 ミリ秒の遠く離れたサーバーの場合、5 つの要求に 1 秒かかります)。

于 2015-04-17T01:27:39.180 に答える
0

非同期読み込みの利点の1つは（特に分析スニペットのようなもので）、少なくともそれを一番上に配置すると、ページのレンダリングに時間をかけずにできるだけ早く読み込まれることです。したがって、分析を使用すると、ユーザーがページを離れる前（おそらくページが完全に読み込まれる前）にユーザーを実際に追跡する可能性が高くなります。

また、appendの代わりにinsertBeforeが使用されます。これは、バグがあったことを正しく覚えていれば（一部のIEバージョンでは、コメントにある以下のリンクも参照してください）。

私にとってこのリンク： 非同期JS は私がこれまでに見つけた中で最も便利でした。特に問題が発生するため、Googleの分析コードを使用しても、onloadイベントはブロックされます（少なくとも一部のブラウザーでは）。これを起こさないようにするには、関数をonloadイベントにアタッチすることをお勧めします。

非同期スニペットを一番下に置くために、それはあなたが投稿したリンクで実際に説明されています。彼は、onloadイベントを使用せずにDOMが完全にロードされていることを確認するためにそれを行っているようです。したがって、スクリプトが何をしているかによって異なる場合があります。DOMを操作していない場合は、本体の下部にDOMを追加する理由はありません。それに加えて、私は個人的にそれをonload-eventに追加したいと思います。

于 2011-07-28T18:51:35.217 に答える