ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript におけるブラウザの非同期読み込みの分析

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

不言
リリース: 2018-08-06 17:04:07
オリジナル
1479 人が閲覧しました

この記事の内容は 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(&#39;script&#39;);
 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(&#39;script&#39;);
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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート