JavaScript のシングルスレッド非同期読み込みのための 3 つのソリューション

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

js の同期ロードの欠点: 読み込みツールのメソッドでドキュメントをブロックする必要はありません。js のオーバーロードはページの効率に影響します。ネットワーク速度が低下すると、Web サイト全体がその後のレンダリングやその他の作業を行わずに 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 の非同期読み込みに関する 3 つの解決策

JavaScript の非同期読み込みの詳細な説明

以上がJavaScript のシングルスレッド非同期読み込みのための 3 つのソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。