ホームページ >ウェブフロントエンド >jsチュートリアル >jsを非同期でロードするにはどうすればよいですか? jsを非同期で読み込む方法の紹介
jsを非同期でロードするにはどうすればよいですか? jsを非同期で読み込む方法の紹介
- 青灯夜游転載
- 2019-01-05 10:33:363104ブラウズ
jsを非同期でロードするにはどうすればよいですか?この記事では、js を非同期で読み込む 3 つの方法を紹介します。必要な方は参考にしていただければ幸いです。 [ビデオ チュートリアルの推奨: JavaScript ビデオ チュートリアル]
js 読み込みタイムライン:
js に基づいて生成されます。ブラウザが実行する一連の動作をその瞬間から順番に記録し、読み込みシーケンス、最適化に使用できるもの、理論的根拠を記述し、それを記憶します。
1、ドキュメント オブジェクトを作成します。 Web ページの解析を開始します。 HTML 要素とそのテキスト コンテンツを解析した後、Element オブジェクトと Text ノードをドキュメントに追加します。この段階では document.readyState = 'loading' です。 (ドキュメント オブジェクトが生成され、ドキュメントのステータス ビットがロードに変わります)
2 リンク外部 CSS が見つかった場合は、ロードするスレッドを作成し、ドキュメントの解析を続けます。
3、外部 JS のスクリプトが発生し、非同期または遅延が設定されていない場合、ブラウザーはロードしてブロックし、JS がロードされるのを待ってスクリプトを実行してから続行します。文書を解析します。
4。スクリプト外部 JS に遭遇し、非同期と遅延を設定すると、ブラウザーはロードするスレッドを作成し、ドキュメントの解析を続けます。非同期属性を持つスクリプトの場合、スクリプトがロードされた直後に実行されます。 (document.write() を非同期で使用することは禁止されています)
document.write(): 内容を HTML ドキュメントとして扱い、ページに出力します。ドキュメント全体がほぼ解析されているとき、document.write() を使用すると、以前のドキュメント ストリームがすべてクリアされ、その中のドキュメント ストリームが代わりに使用されます。
例: 全体ページには a のみが表示されます。 ここの document.write(); にはドキュメント フローを排除する機能があり、スクリプトも排除されます。
<p style="height:100px;width:100px;background-color:red;"></p>
<script type="text/javascript">
window.onload = function(){
document.write('a');
}
</script>5 img などに遭遇した場合、まず dom 構造を通常どおり解析し、次にブラウザは src を非同期でロードしてドキュメントの解析を続けます。
6。ドキュメントの解析が完了すると、document.readyState = 'interactive' になります。
最初に解析し、次にロードし、ステータス ビットがインタラクティブ (アクティブ) に変わります。
ステータス ビットの遷移を確認します:
console.log(document.readyState);
document.onreadystatechange = function(){
console.log(document.readyState);
}7 ドキュメントの解析が完了すると、defer で設定されたすべてのスクリプトが順番に実行されます。 (これは非同期とは異なりますが、(document.write());
8 の使用も禁止されていることに注意してください。 document オブジェクトは DOMContentLoaded イベントをトリガーし、これにより、同期スクリプト実行フェーズからプログラム実行フェーズに移行します。
例 1: 出力と完了を同時に行うと、onDOMContentLoaded しか使用できません。 addEventListener にバインドされている場合に使用されます。
console.log(document.readyState);
document.onreadystatechange = function(){
console.log(document.readyState);
}
document.addEventListener('DOMContentLoaded',function(){
console.log('a');
},false)例 2: window.onload と次の例の違い
$(document).ready(function(){
//当DOM解析完就执行的部分（不用加载完，加载完是给用户看的，对于我们来说解析完就可以操作了）
/*它的原理就是interactive和DOMContentLoaded事件*/
})違いは次のとおりです: window.onload は必要に応じてロードされます。 、ただし、解析された後に操作できます (これは jQuery メソッドです)
例 3: 上記のスクリプトを配置するときは、次のように記述するのが最善です。onload は書かず、onload は決して書かないでください。ただし、最良の方法は、以下に記述することです。
<head>
<meta charset="UTF-8">
<title>lottery</title>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){
var p = document.getElementsByTagName('p')[0];
console.log(p);
},false)
</script>
script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完
</head>
//script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完9 すべての非同期スクリプトが読み込まれて実行され、img などが読み込まれた後、 document.readyState = 'complete
10 ここからは、ユーザー入力やネットワーク イベントなどを非同期応答方式で処理します。概要は 3 つです。ポイント: まず、ドキュメント オブジェクトが生成されます。これは、js を実行できることを意味します。2 番目のステップでは、ドキュメントが解析され、3 番目のステップでは、ドキュメントがロードされて実行されます。
js を非同期的に読み込む方法:
1)、async HTML5 属性。JavaScript コードを非同期でロードできるようにします36fa79bca5f3317b9acb41ac36f86b382cacc6d41bbb37262a98f745aa00fbf0
2) defer は古いバージョンの IE
76cd4913e6ee9a69d0dba4fc797cdc002cacc6d41bbb37262a98f745aa00fbf0
3) スクリプト タグを動的に作成します (h5 との互換性の問題を解決できます)
8019067d09615e43c7904885b5246f0a
function asyncLoaded(url,callback){
var script = document.createElement("script");
// script.src = url; 假如说网速非常好，直接执行完成了，后面就监听不到状态的改变了
if(script.readyState){
script.onreadystatechange = function(){
if(script.readyState == "complete" || script.readyState =="loaded"){
// 执行某个函数
callback()
}
}
}else{
script.onload = function(){
// 执行某个函数
callback()
}
}
script.src = url; //异步的过程
document.head.appendChild(script)
}
asyncLoaded("05.js",function(){
fn() //05.js中的函数
})
2cacc6d41bbb37262a98f745aa00fbf0
上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！
以上がjsを非同期でロードするにはどうすればよいですか? jsを非同期で読み込む方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。