JavaScriptの非同期読み込みについて詳しく解説-ミニプログラム開発-php.cn
ホームページ
WeChat アプレット
ミニプログラム開発
JavaScriptの非同期読み込みについて詳しく解説
JavaScriptの非同期読み込みについて詳しく解説
Mar 17, 2018 pm 03:35 PM
javascript
js
詳しい説明
今回は、JavaScript の非同期読み込みについて詳しく説明し、JavaScriptの非同期読み込みを扱う際の注意事項 について、実際のケースを見てみましょう。
同期読み込みの問題
ここでの「読み込み」は、「ダウンロード」ではなく、解析と実行として理解できます。コード これらはすべてウォーターフォール読み込みであり、ブロックしていませんが、js の実行は常にブロックされます。これはどのような問題を引き起こしますか?インデックス ページで js をロードする必要があるが、リクエストの 1 つが長時間応答を受け取らない場合、後続の js コードの実行 (同期ロード) がブロックされ、ページのレンダリングを続行できなくなります (js の導入が完了した場合)はラベルの後の head にあります)。
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
this is a test ログイン後にコピー
たとえば、上記のコードは、index.html ファイルとして保存されますが、ページの本体は単純な string ですが、コードが実行された後もページは空白のままです。リクエストされた js が長時間ロードできないため (Google がブロックされているなどの理由で)、後続のコードの実行がブロックされ、ページをレンダリングできません。おそらく、js コードを
の前に置くと、ページが最初にレンダリングされると提案するかもしれません。良い方法です。js を後ろに配置してみます:
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script> ログイン後にコピー
ページは即座にレンダリングされ、「これはテストです」もすぐに前景に表示され、世界は穏やかに見えますが、:
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
ログイン後にコピー
単に追加するだけです前のコードの基礎 コードを書きましたが、明らかに、前の js リクエストが次のコードの読み込みをブロックしていたことに気づきました。 js の読み込み位置はページのレンダリングを変更するだけですが、js の読み込みは変更されません。js は依然としてブロックされます。
js の非同期読み込みを実現する
私たちの要件は非常に単純であるように思えます。より簡単に言うと、Google が提供する最初の js をリクエストしながら、次のコードを実行し続けることができます。 js は、js の非同期読み込みを実装します。
最も一般的な方法は、スクリプト タグを動的に生成することです:
<body>
this is a test
<script type="text/javascript">
~function() {
var s = document.createElement('script');
s.src = 'http://china-addthis.googlecode.com/svn/trunk/addthis.js';
document.body.appendChild(s);
}();
</script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
console.log('hello world');
</script>
</body> ログイン後にコピー
しかし、この読み込み方法では、読み込みが完了する前に onload イベントがトリガーされなくなり、多くのページで onload 中に追加のコードを実行する必要があります。レンダリング作業などがあるため、一部のページの初期化処理がブロックされます:
<body>
this is a test
<script type="text/javascript">
~function() {
// function async_load() {
var s = document.createElement('script');
s.src = 'http://china-addthis.googlecode.com/svn/trunk/addthis.js';
document.body.appendChild(s);
// }
// window.addEventListener('load', async_load, false);
}();
window.onload = function() {
var txt = document.createTextNode(' hello world');
document.body.appendChild(txt);
};
</script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
</body> ログイン後にコピー
たとえば、上記のコードでは「hello world」を適切にレンダリングできません。コメントを削除して、Google が提供する JS を実行するだけで済みます。 onload 時に使用されます。 非同期読み込みを開始したところです。これにより、onload イベントのトリガーがブロックされるという問題が解決されます。
DOMContentLoaded および OnLoad イベントを追加しました。 DOMContentLoaded: ページ (ドキュメント) が解析され、ページ内の dom 要素が使用可能になりました。ただし、ページ内で参照されている画像とサブフレームはまだ読み込まれていない可能性があります。 OnLoad: ページのすべてのリソースがロードされます (画像を含む)。ブラウザの読み込みの進行はこの時点で停止します。これら 2 つの時点は、ページ読み込みタイムラインを 3 つの段階に分割します。
上記はこの問題に対するより良い解決策のように見えますが、html5 ではより簡単な方法である async 属性が提供されています。
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' async='async'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
console.log('hello world');
</script> ログイン後にコピー
async は、HTML5 の新しい属性です。async 属性は、スクリプトが利用可能になると、非同期で実行されることを規定します (ダウンロードされるとすぐに実行されます)。
async 属性は外部スクリプトにのみ適用されることに注意してください (src 属性を使用する場合のみ)
defer 属性は async と一緒によく言及されます:
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' defer='defer'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
console.log('hello world');
</script> ログイン後にコピー
実装効果は似ているように見えますが、本当に同じですか？ defer 属性の定義を見てみましょう。
以前は、defer は IE ハックのみをサポートしていましたが、HTML5 の登場により、defer は完全にサポートされるようになりました。 defer 属性は、ページの読み込みが完了するまでスクリプトが実行されないことを指定します。 defer 属性は外部スクリプトにのみ適用されます (src 属性を使用する場合のみ)。 ps: IE でサポートされている遅延は当てはまらないようです。IE には興味がないので詳しくは説明しません。興味があれば、関連情報を確認してください。
asyncとdeferはよく一緒に出てくるので分析してみましょう！
async 属性と defer 属性がない場合 (true に割り当てられている、以下同様)、ブラウザは現在の JS スクリプトをすぐに実行し、async 属性がある場合は後続のドキュメント要素をロードしてレンダリングするプロセスがブロックされます。現在の js と同じであること script.js の読み込みと実行は並行して実行されます (非同期)。 defer 属性がある場合、後続のドキュメント要素の読み込み処理は script.js の読み込みと並行して実行されます。ただし、script.js の実行は、すべての要素 (DOM) が解析された後に完了する必要があります。その後、DOMContentLoaded イベントが発生する前に完了します。
来看一张网上盗的图：
蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。
此图告诉我们以下几个要点（摘自defer和async的区别）：
defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的
关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用
async 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行
仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics
但是在我看来（以下个人理解，如有出入还望指出），defer在异步加载上的应用并不会比async广。async的英文解释是异步，该属性作用在脚本上，使得脚本加载（下载）完后随即开始执行，和动态插入script标签作用类似（async只支持h5，后者能兼容浏览器）；而defer的英文解释是延迟，作用也和字面解释类似，延迟脚本的执行，使得dom元素加载完后才开始有序执行脚本，因为有序，所以会带来另一个问题：
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' defer='defer'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js' defer='defer'></script>
<script type="text/javascript" src='index.js' defer='defer'></script>
console.log('hello world'); ログイン後にコピー
如果执行这段代码，控制台的“hello world”也会迟迟得不到结果。所以我觉得还是async好用，如果要考虑依赖的话，可以选择requirejs、seajs等模块加载器。
总结
JavaScript的异步加载还有一些方式，比如：AJAX eval（使用AJAX得到脚本内容，然后通过eval(xmlhttp.responseText)来运行脚本）、iframe方式等。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
webpack如何动态引入文件
微信小程序的圆形进度条怎么做
以上がJavaScriptの非同期読み込みについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Win11での管理者権限の取得について詳しく解説
Mar 08, 2024 pm 03:06 PM
Windows オペレーティング システムは世界で最も人気のあるオペレーティング システムの 1 つであり、その新バージョン Win11 が大きな注目を集めています。 Win11 システムでは、管理者権限の取得は重要な操作であり、管理者権限を取得すると、ユーザーはシステム上でより多くの操作や設定を実行できるようになります。この記事では、Win11システムで管理者権限を取得する方法と、権限を効果的に管理する方法を詳しく紹介します。 Win11 システムでは、管理者権限はローカル管理者とドメイン管理者の 2 種類に分かれています。ローカル管理者はローカル コンピュータに対する完全な管理権限を持っています
推奨: 優れた JS オープンソースの顔検出および認識プロジェクト
Apr 03, 2024 am 11:55 AM
顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。
Oracle SQLの除算演算の詳細説明
Mar 10, 2024 am 09:51 AM
OracleSQL の除算演算の詳細な説明 OracleSQL では、除算演算は一般的かつ重要な数学演算であり、2 つの数値を除算した結果を計算するために使用されます。除算はデータベース問合せでよく使用されるため、OracleSQL での除算演算とその使用法を理解することは、データベース開発者にとって重要なスキルの 1 つです。この記事では、OracleSQL の除算演算に関する関連知識を詳細に説明し、読者の参考となる具体的なコード例を示します。 1. OracleSQL での除算演算
PHPモジュロ演算子の役割と使い方を詳しく解説
Mar 19, 2024 pm 04:33 PM
PHP のモジュロ演算子 (%) は、2 つの数値を除算した余りを取得するために使用されます。この記事では、モジュロ演算子の役割と使用法について詳しく説明し、読者の理解を深めるために具体的なコード例を示します。 1. モジュロ演算子の役割 数学では、整数を別の整数で割ると、商と余りが得られます。たとえば、10 を 3 で割ると、商は 3 になり、余りは 1 になります。モジュロ演算子は、この剰余を取得するために使用されます。 2. モジュロ演算子の使用法 PHP では、% 記号を使用してモジュロを表します。
Linuxシステムコールsystem()関数の詳細説明
Feb 22, 2024 pm 08:21 PM
Linux システム コール system() 関数の詳細説明 システム コールは、Linux オペレーティング システムの非常に重要な部分であり、システム カーネルと対話する方法を提供します。その中でも、system()関数はよく使われるシステムコール関数の一つです。この記事では、system() 関数の使用法を詳しく紹介し、対応するコード例を示します。システム コールの基本概念 システム コールは、ユーザー プログラムがオペレーティング システム カーネルと対話する方法です。ユーザープログラムはシステムコール関数を呼び出してオペレーティングシステムを要求します。
Linuxのcurlコマンドの詳しい説明
Feb 21, 2024 pm 10:33 PM
Linuxのcurlコマンドの詳細な説明 要約：curlは、サーバーとのデータ通信に使用される強力なコマンドラインツールです。この記事では、curl コマンドの基本的な使用法を紹介し、読者がコマンドをよりよく理解して適用できるように実際のコード例を示します。 1.カールとは何ですか? curl は、さまざまなネットワーク要求を送受信するために使用されるコマンド ライン ツールです。 HTTP、FTP、TELNETなどの複数のプロトコルをサポートし、ファイルアップロード、ファイルダウンロード、データ送信、プロキシなどの豊富な機能を提供します。
jsとvueの関係
Mar 11, 2024 pm 05:21 PM
js と vue の関係: 1. Web 開発の基礎としての JS、2. フロントエンド フレームワークとしての Vue.js の台頭、3. JS と Vue の補完関係、4. JS と Vue の実用化ビュー。
Promise.resolve() について詳しく見る
Feb 18, 2024 pm 07:13 PM
Promise.resolve() の詳細な説明には、特定のコード例が必要です。Promise は、非同期操作を処理するための JavaScript のメカニズムです。実際の開発では、順番に実行する必要があるいくつかの非同期タスクを処理する必要があることがよくあり、満たされた Promise オブジェクトを返すために Promise.resolve() メソッドが使用されます。 Promise.resolve() は Promise クラスの静的メソッドであり、
See all articles
