4

ページにノンブロッキング JavaScript をロードしたいと考えています。以前asyncはサポートされていましたが、ベスト プラクティスは単純なスクリプトを介して動的にロードするようです。

これは、最初の の前に挿入された正常に動作する例です<script>:

var myscript = document.createElement('script');
myscript.async = true; // cannot hurt, right?
myscript.type = 'text/javascript';
myscript.src = 'myscript.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(myscript, node);

<head>の末尾や のようなさまざまな場所にスクリプトを挿入するいくつかのバージョンを見つけました<body>。

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

非同期ですが、一部のブラウザでは順序が重要なようです。ブラウザのサポートに違いはありますか? パフォーマンス？ブロックリスク？

順序に関する制約はありません (相互に影響しません) が、スクリプトの読み込みに時間がかかりすぎる場合でも、ページ コンテンツが正常に読み込まれるようにしたいと考えています。最後の解決策が最も効果的だと思いますが、違いはわかりません。

4

4 に答える 4

2

$script.js のようなものを使用する必要があります: http://www.dustindiaz.com/scriptjs

于 2013-01-08T21:45:48.047 に答える
1

ページが完了するのを待ってから、追加するスクリプトをロードするスクリプトを試してみることができます。最近これを行ったところ、ページが正常に読み込まれ、新しいブロックが表示されます。

var Widget = {}
    Widget.myDocReadyInterval = setInterval(function(){
        if (document.readyState === "complete")
    {
        clearInterval(Widget.myDocReadyInterval);
        Widget.startLoading();
    }
}, 20);
Widget.startLoading(){
// do what you need here...
}
于 2013-01-08T21:49:03.490 に答える
1

ここでは、本文の最後にスクリプトを追加するのが最善の解決策です。script タグをブロックせずに DOM を読み込むことができます。また、スクリプトをドキュメントの最後に配置すると、関数を DOM Ready イベントでラップする必要がなくなります。これは、スクリプトの実行が開始された時点で、DOM がブラウザーによって既に読み込まれているため、直接操作を開始したり、いくつかのイベントにサブスクライブします。

于 2013-01-08T21:46:22.697 に答える
1

あなたの質問はロード部分に焦点を当てていますが、実際にはパフォーマンスはさまざまなフェーズの影響を受ける可能性があります。

  • ロード
  • 解析中
  • 実行

このため、本文の最後にスクリプトを追加することは、通常、邪魔にならないと考えられています。

さらにプッシュするには、DOM がロード スクリプトを実行する準備が整うまで待つことができます。この場合、スクリプトを頭に付けるか体に付けるかは問題ではありません。

[編集] 補足: html ページでは head タグと body タグは必須ではありません。document.getElementsByTagName('script')[0]要素を取得することが保証されるため、このようなエッジケースでは適切なアプローチです（少なくともページにロードスクリプトがあります）。

于 2013-01-08T21:48:38.737 に答える