JavaScript におけるブラウザの非同期読み込みの分析

この記事の内容は JavaScript におけるブラウザの非同期読み込みの分析に関するものです。必要な方は参考にしていただければ幸いです。

私たちが初めて js を学んだとき、js はシングルスレッドで同期的にロードされるため、html と css のロード行がブロックされることを知っていたはずです (js は html と css を変更できるため)

js は同期的にロードされます。 : 読み込みツールの方法でドキュメントをブロックする必要はありません。js のオーバーロードは、ネットワーク速度が低下すると、その後のレンダリングやその他の作業が行われずに、js が読み込まれるまで待機します。

js の一部のツールとメソッドはオンデマンドでロードする必要がありますか? ? ?このとき、jsを非同期でロードする必要があります。

JavaScript の非同期読み込みのための 3 つのオプション。

1. defer は非同期でロードされますが、すべての DOM ドキュメントが解析されるまで実行されません。 IEのみを使用するか、すべてのコードを内部で記述することができます

 <script type = "text/javascript" src = "tools.js"  defer = "defer"></script>

rreee

2. async非同期ロード、ロード後に実行されるasyncは外部スクリプトのみをロードでき、scriptタグにjsを記述することはできません

<script defer = "defer">
console.log("a");
</script>

上記の2つの方法は、実行されました。常にページをブロックするわけではありません

ブラウザの互換性の問題を解決するには? ? 1、2、2の2つの方法を同時に読み込むと、コードが重複して実行順序が競合するため、3番目の方法を導入します。 スクリプトを作成し、スクリプトに挿入します。 DOM、ロード後のcallBack、

 <script type = "text/javascript" aysnc = "aysnc"></script>

外部jsファイルにテスト関数を書くと

 var script = document.createElement('script');
 script.type = "text/javescript";
 script.src = "demo.js";
// 此时就会加载src地址里面的东西
// 此时会有一个灯塔模式，灯塔模式会产生一个img属性，用来存放地址的加载
document.head.appendChild(script);  //----此时就会在页面上展示js里面的内容

外部demo.jsファイルはここには表示されませんが、その中にテスト関数があります。結果は以下の通りです:

テスト関数を実行すると、ロードに時間がかかります。テストが実行された時点では、まだロードされていません。したがって、テストが定義されていないことが表示されます。この問題をどうやって解決すればよいでしょうか?

まず、onload イベントについて考えます。

script.onload : 互換性は非常に優れており、Safari chrome Firefox opera と互換性があります。

var script = document.createElement('script');
script.type = "text/javascript";
script.src = "demo.js";
test();
document.head.appendChild(script);

ただし、IE にはスクリプトの onload イベントがなく、IE には独自のメソッド script.readyState があります。

script.readyState: IEのスクリプトにはステータスコード(readyState)があり、ステータスコードを確認して読み込まれているかどうかを判断します。 IE では、script タグには readyStatechange イベントがあり、script.readyState 値が変更されたときにトリガーされるイベントをリッスンします。

(script.readyState == "complete" || script.readyState == "loaded" は解析が完了したことを意味します。)

 script.onload = function(){
                                test();
                            }

最後に、オンデマンド読み込み関数を実現するために関数をカプセル化します。

script.onreadystatechange = function(){
      if(script.readyState == "complete" || script.readyState == "loaded"){
                  callback(); //回调函数：当满足一定条件才可以被执行
              }
                  }

おすすめ関連記事:

jsチュートリアル - 配列ループ削除エラーの実装と解決方法

【Javascript】zeptoソースコード コールバック解析

以上がJavaScript におけるブラウザの非同期読み込みの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。