JavaScript ファイルの同期読み込みと非同期読み込みの実装原則_JavaScript スキル
charset: オプション。 src によって導入されるコードの文字セットを指定します。ほとんどのブラウザはこの値を無視します。
defer: ブール値、オプション。スクリプトの実行を遅らせることは、ページの body タグの下部に script タグを配置することと同じであり、js スクリプトはドキュメントの DOMContentLoaded の前に実行されます。 IE および Firefox の新しいバージョンを除き、他のブラウザはサポートされていません。
言語: 非推奨になりました。ほとんどのブラウザはこの値を無視します。
src: オプション。サフィックス名を制限せずにインポートする外部コードファイルを指定します。
タイプ: 必須。スクリプトのコンテンツタイプ（MIMEタイプ）を指定します。実際には、通常、この値を指定する必要はありません。ブラウザはデフォルトで text/javascript タイプとして解釈して実行します。 HTML5 の
script 属性 : 新しい HTML5 標準で定義された属性に加えて、HTML5 の
script タグは、HTML4.01 と比較して language 属性を削除して変更しました。 type 属性はオプション (デフォルトは text/javascript) で、新しい属性 async が追加されます。
async: 属性の役割であるブール値は、スクリプトが非同期で実行されるかどうかを定義します。値は true または false です。
async が true に設定されている場合、defer 属性は無視されます。
非同期で実行される js ファイルは、読み込むドキュメントにコンテンツを書き込むために document.write() を使用しないと想定されているため、非同期で実行される js ファイルの読み込みおよび実行中に document.write() を使用しないでください。
例外は次のとおりですscript タグ属性に追加すると、ページが js ファイルを導入する方法がその読み込みと実行モードに影響します。
スクリプト ノード (appendChild(scriptNode) など) を追加することによって導入されたすべての js ファイルは非同期で実行されます (scriptNode を挿入する必要があります)ノードを作成して src を設定するだけでは、js ファイルはロードされません。これは、img のプリロードとは異なります)
HTML ファイルの <script> タグ内のコードまたは js 内のコードsrc によって参照されるファイルは同期的にロードされ、実行された <br>html ファイルの <script> タグ内のコードは、 document.write() メソッドを使用して、<script> の src 属性によって参照される js ファイルを導入します。非同期的に実行される <BR>html ファイル内の ; タグ。 js ファイルのコード内で document.write() メソッドを使用して導入された js ファイルが同期的に実行されます。 <BR>Image オブジェクトを使用して、js ファイルを非同期的にプリロードします (実行されません) <br><br>次のようなものは使用しないでください。このメソッドは、js ファイルをロードするリクエストを開始しません: <BR>divNode.innerHTML = '<script src="xxx.js"> ;</script>';
window.onload イベントは、ファイルがロードされた後にのみ実行されます (非同期でロードされた場合でも)
============ ===========================================
1. ><script> <br>// 実行されたコードを同期的にロードします <br></script>
2.
xx.js
3.
<script><BR>document.write('<script src="xx.js"></script>'); のコードを同期的にロードして実行します。 //xx.js
4,
xx のコードを非同期的にロードして実行します。 js には次のコードが含まれています:
document.write('');
その後、xx.js、11.js、および 22.js がすべて同期的に読み込まれ、実行されます。
スクリプト ノードの挿入によって xx.js、11.js、および 22.js が非同期的に読み込まれる場合、11.js と 22.js は非同期的に読み込まれます。
スクリプト ノードの挿入によって xx.js が非同期的に読み込まれる場合、 11.js と 22.js は document.write(script) モードでロードされ、次に 11.js と 22.js は同期的にロードされます (最新のブラウザーでテストされています。Chrome では、xx.j の非同期ロード実行は行われなくなりました)利用可能な document.write() はコンテンツをドキュメントに書き込みますが、Firefox と IE はドキュメントが閉じる前に書き込むことができます (メソッドは HTML でアラートを使用してドキュメントが閉じないようにします))
テスト: 11 のalert() .js (for ループは使用しないでください。ブラウザは単一のスレッドで実行され、コードの一部の実行を続けると残りのコードがブロックされます)、22.js の console.log()、 22.js のコードがブロックされていることがわかります
5.
次のメソッドでは、appendChild の実行後に xx.js がロードされ、非同期で実行されます
script.setAttribute("src") ","xx.js");
documentrt.getElementsByTagName("head") [0].appendChild(script);
6. Image オブジェクトを使用して js ファイルを非同期的にプリロードします (実行されません)
リクエストは、イメージの src が割り当てられたときに開始され、ファイル タイプは選択されません (イメージは動的に指定される場合もあります)検証コードなどのスクリプトによって作成されるため、js ファイルの URL を image.src に割り当てることができます。js はロード後にブラウザーによってキャッシュされます。
var img = new Image();
img.onload = function(){alert( 1); }; //返された js ファイル MIME は画像ではないため、onload コールバック関数はトリガーされません
img.src = 'http://localhost/test/loadjs/try.2.js' ;
var s = document.createElement("script");
var h = document.getElementsByTagName("head")[0];
//js
s.src=img を実行します。 src;
h.appendChild(s);
js ファイルをロードする関数:
varloadJS = function(url,callback){
var head = document.getElementsByTagName('head');
if(head&&head); .length){
head = head[0];
}else{
head = document.body;
var script = document.createElement('script'); >script.src = url;
script.type = "text/javascript";
head.appendChild(script);
script.onload = script.onreadystatechange = function(){
//スクリプト タグ、IE には onreadystatechange イベントがあり、w3c 標準には onload イベントがあります
//これらの readState は IE8 以下用です。W3C 標準のスクリプト タグには onreadystatechange がなく、
//Onload はありません。ファイルが正常にロードされなかった場合に実行されます。
//(!this.readyState) は W3C 標準用です。IE 9 は W3C 標準の onload
if ((!this.readyState) || this.readyState もサポートします。 == "完了" || this.readyState == "ロード済み" ){
callback();
}
}//end onreadystatechange
}
ポイント 4 のテスト (同期読み込み) (アラートを挿入すると、読み込み中のブロックを簡単に確認できます) tryjs .html
< ;body>
tryjs
>
try.1.js
コードをコピー
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Ajax 例外とエラーを解決する方法のリストを公開する
Jan 30, 2024 am 08:33 AM
Ajaxの異常が判明、各種エラーへの対処には具体的なコード例が必要 2019年、フロントエンド開発はインターネット業界において無視できない重要なポジションとなった。フロントエンド開発で最も一般的に使用されるテクノロジの 1 つである Ajax は、非同期のページ読み込みとデータ対話を実現でき、その重要性は自明です。しかし、Ajax 技術を使用すると、さまざまなエラーや例外が発生することが多く、これらのエラーにどう対処するかは、すべてのフロントエンド開発者が直面する問題です。 1. ネットワーク エラー Ajax を使用してリクエストを送信する場合、最も一般的なエラーは次のとおりです。
jQuery .val() が機能しない状況に効果的に対処する
Feb 20, 2024 pm 09:36 PM
タイトル: jQuery.val() が動作しない問題を解決する方法とコード例 フロントエンド開発では、ページ要素の操作に jQuery がよく使われます。その中でも、フォーム要素の値の取得または設定は、一般的な操作の 1 つです。通常、フォーム要素の値を操作するには jQuery の .val() メソッドを使用します。ただし、jQuery.val() が機能しない状況が発生し、問題が発生する可能性があります。この記事では、jQuery.val() を効果的に扱う方法を紹介します。
htmlの読み方
Apr 05, 2024 am 08:36 AM
HTML 自体はファイルを読み取ることができませんが、JavaScript を使用する (XMLHttpRequest、fetch())、サーバーサイド言語を使用する (PHP、Node.js)、サードパーティのライブラリを使用する (jQuery. get() 、axios、fs-extra)。
C# 委任とは何ですか? それによってどのような問題が解決されますか?
Apr 04, 2024 pm 12:42 PM
委任は、非同期プログラミングとイベント処理の問題を解決するために、オブジェクト間でメソッド ポインターを渡すために使用されるタイプセーフな参照型です。 非同期プログラミング: 委任により、メソッドを異なるスレッドまたはプロセスで実行できるようになり、アプリケーションの応答性が向上します。イベント処理: デリゲートはイベント処理を簡素化し、クリックやマウスの動きなどのイベントを作成して処理できるようにします。
WordPress でページのリダイレクトを防ぐにはどうすればよいですか?
Mar 05, 2024 am 09:33 AM
WordPress でページのリダイレクトを防ぐにはどうすればよいですか? Web サイト開発では、WordPress でページ非ジャンプ設定を実装したい場合があります。つまり、特定の操作中に、ページ全体を更新せずにページ コンテンツを更新できます。これにより、ユーザー エクスペリエンスが向上し、Web サイトがよりスムーズになります。次に、WordPress でページ非ジャンプ設定を実装する方法と具体的なコード例を紹介します。まず、Ajax を使用してページのジャンプを防ぐことができます。アヤックス
ウェブサイトの速度を向上させるための主要な最適化モードは、すべてのフロントエンド開発者がマスターする必要があります。
Feb 02, 2024 pm 05:36 PM
フロントエンド開発者の必需品: これらの最適化モードをマスターして、Web サイトをスムーズに作成しましょう。インターネットの急速な発展に伴い、Web サイトは企業のプロモーションとコミュニケーションのための重要なチャネルの 1 つになりました。パフォーマンスが良く、読み込みが速い Web サイトは、ユーザー エクスペリエンスを向上させるだけでなく、より多くの訪問者を惹きつけます。フロントエンド開発者として、いくつかの最適化パターンをマスターすることが不可欠です。この記事では、開発者が Web サイトをより適切に最適化できるように、一般的に使用されるフロントエンド最適化テクニックをいくつか紹介します。圧縮ファイル Web サイト開発で一般的に使用されるファイルの種類には、HTML、CSS、J などがあります。
HTMLに外部jsを導入する方法
Apr 11, 2024 am 06:18 AM
外部 JS ファイルを HTML に含めるには、<script> タグを使用して、読み込むファイルの URL を指定します。 type、defer、または async 属性を指定して、読み込みと実行の発生方法を制御することもできます。通常、<script> タグは、ページのレンダリングをブロックしないように、<body> セクションの最後に配置する必要があります。
PHP検索機能最適化ヒントの共有
Mar 06, 2024 am 11:12 AM
ユーザーは必要な情報を見つけるために検索ボックスをよく使用するため、PHP 検索機能は常に Web サイト開発において非常に重要な部分です。しかし、多くのWebサイトでは検索機能を実装する際に、効率の低さや検索結果が不正確になるなどの問題を抱えています。 PHP 検索機能の最適化に役立つように、この記事ではいくつかのヒントを共有し、具体的なコード例を示します。 1. 全文検索エンジンを使用します。従来の SQL データベースは、大量のテキスト コンテンツを処理する場合の効率が低下するため、Elasticsearch、Solr などの全文検索エンジンを使用することをお勧めします。
