JavaScript の非同期読み込みに関連するいくつかの問題-jsチュートリアル-php.cn
ホームページ
ウェブフロントエンド
jsチュートリアル
JavaScript の非同期読み込みに関連するいくつかの問題
JavaScript の非同期読み込みに関連するいくつかの問題
Feb 22, 2018 am 09:06 AM
javascript
js
関連している
デフォルトの js は同期的に読み込まれます。ここでの「読み込み」は、「ダウンロード」ではなく、解析と実行として理解できます。ブラウザの最新バージョンでは、コードによって要求されたリソースがウォーターフォール形式で読み込まれます。ブロックではありませんが、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 ファイルとして保存されますが、コードが実行された後、ページは空白のままになります。リクエストされた 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>
ログイン後にコピー
が前面にあります。コードに基づいてコードが追加されただけですが、「hello world」が長時間コンソールに出力されませんでした。明らかに、前の 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 イベントがトリガーされないという問題がまだあります。追加のレンダリング作業などを実行する必要があるため、一部のページの初期化処理がブロックされます:
<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 解析と比較して) 非同期です。
2 つの違いは、スクリプトがダウンロードされた後にいつ実行されるかにあります。明らかに、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方式等。
相关推荐:
Angular结合zTree异步加载节点数据实例分享
JavaScript文件的同步和异步加载的实现代码
使用DataTable插件实现异步加载数据详解
以上がJavaScript の非同期読み込みに関連するいくつかの問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法
Dec 17, 2023 pm 02:54 PM
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。
推奨: 優れた JS オープンソースの顔検出および認識プロジェクト
Apr 03, 2024 am 11:55 AM
顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。
WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー
Dec 17, 2023 pm 05:30 PM
WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジー はじめに： インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー
株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます
Dec 17, 2023 pm 06:55 PM
株式分析に必須のツール: PHP および JS でローソク足チャートを描画する手順を学びます。特定のコード例が必要です。インターネットとテクノロジーの急速な発展に伴い、株式取引は多くの投資家にとって重要な方法の 1 つになりました。株価分析は投資家の意思決定の重要な部分であり、ローソク足チャートはテクニカル分析で広く使用されています。 PHP と JS を使用してローソク足チャートを描画する方法を学ぶと、投資家がより適切な意思決定を行うのに役立つ、より直感的な情報が得られます。ローソク足チャートとは、株価をローソク足の形で表示するテクニカルチャートです。株価を示しています
JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法
Dec 17, 2023 pm 12:09 PM
JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき
WebSocketとJavaScriptを使ったオンライン予約システムの実装方法
Dec 17, 2023 am 09:39 AM
WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築
Dec 17, 2023 pm 05:13 PM
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
See all articles
