まず、JavaScriptの読み込みと実行についてお話したいと思います。一般的に、ブラウザにはJavaScript操作の2つの主要な機能があります。1）ロード後すぐに実行すると、2）実行中のページの後続コンテンツ（ページレンダリングやその他のリソースのダウンロードを含む）をブロックします。したがって、複数のJSファイルが導入されている場合、ブラウザの場合、これらのJSファイルは連続的にロードされ、順次実行されます。
JavaScriptはHTMLドキュメントのDOMツリーを操作する可能性があるため、ブラウザは通常、JSファイルの特殊性によって引き起こされるため、並列ダウンロードのように並行してCSSファイルをダウンロードしません。したがって、JavaScriptが後続のDOM要素を操作したい場合、基本的に、ブラウザはオブジェクトが見つからないというエラーを報告します。 JavaScriptが実行されると、背後にHTMLがブロックされ、DOMツリーの背後にDOMノードがないためです。したがって、プログラムはエラーとして報告されます。
伝統的な方法
したがって、コードに次のコードを書くとき：
コードコピーは次のとおりです。
<script type = "text/javascript"
src = "http://coolshell.cn/asyncjs/alert.js"> </script>
基本的に、ヘッドの<script>タグは、後続のリソースの読み込みとページ全体の生成をブロックします。私はあなたが見ることができる特別な例を作成しました：例1。注：私のalert.js：alert（ "Hello World"）には1つの文があります。
したがって、多くのWebサイトがWebページの最後にJavaScriptをwindow.onload.onloadやdocmuemtの準備をしている理由を知っています。
さらに、ほとんどのJavaScriptコードはページを待つ必要がないため、機能を非同期にロードします。では、どのように非同期にロードするのでしょうか？
document.writeメソッド
したがって、document.write（）はブロックしないという問題を解決できると思うかもしれません。もちろん、document.write <script>タグを実行した後、次のことを実行できると思います。これは正しいことです。これは、同じスクリプトタグのJavaScriptコードに当てはまりますが、ページ全体でこれはブロックされます。これがテストコードです：
コードコピーは次のとおりです。
<script type = "text/javascript"言語= "javascript">
function loadjs（script_filename）{
document.write（ '<' + 'スクリプト言語= "javascript" type = "text/javascript"'）;
document.write（ 'src = "' + script_filename + '">'）;
document.write（ '<'+'/script'+'>'）;
alert（ "loadjs（）exit ..."）;
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs（script）;
alert（ "loadjs（）finent！"）;
</script>
<script type = "text/javascript"言語= "javascript">
アラート（「別のブロック」）;
</script>
アラートの順序は何だと思いますか？さまざまなブラウザで試すことができます。閉じたいテストページは次のとおりです。例2。
スクリプトの延期および非同期プロパティ
IEは、IE6以降、次のような延期タグをサポートしています。
コードコピーは次のとおりです。
<Script Defer Type = "Text/JavaScript" src = "./ alert.js">
</script>
IEの場合、このタグを使用すると、IEはJSファイルを並行してダウンロードし、DOMロード全体が完了するまで実行を保持できます（DomContentLoaded）。複数のdefer <script>は、実行時に表示される順序で実行されます。最も重要なことは、Deferが<script>に追加された後、後続のDomのレンダリングをブロックしないことです。ただし、この延期はIEにのみ使用されるため、一般的に使用されます。
また、標準のHTML5は、JavaScriptを非同期にロードする属性を追加します：Async。どのような価値を割り当てても、表示される限り、JSファイルのロードを非同期に開始します。ただし、非同期負荷には深刻な問題が発生します。つまり、「ロード後すぐに実行」を忠実に実装するため、ページのレンダリングをブロックしませんが、実行の順序とタイミングを制御することはできません。あなたはそれを体験するためにこの例を見てみることができます。
Asyncタグをサポートするブラウザは次のとおりです。Firefox3.6+、Chrome 8.0+、Safari 5.0+、IE 10+、Operaは（ここから）サポートしていないため、この方法もあまり良くありません。すべてのブラウザがそれを行うことができるわけではないからです。
DOMを動的に作成します
この方法はおそらく最も使用されています。
コードコピーは次のとおりです。
function loadjs（script_filename）{
var script = document.createelement（ 'script'）;
script.setattribute（ 'type'、 'text/javascript'）;
script.setattribute（ 'src'、script_filename）;
script.setattribute（ 'id'、 'coolshell_script_id'）;
script_id = document.getElementById（ 'coolshell_script_id'）;
if（script_id）{
document.getElementsByTagname（ 'head'）[0] .RemoveChild（script_id）;
}
document.getElementsByTagname（ 'head'）[0] .appendChild（script）;
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs（script）;
この方法は、JSファイルをロードするための標準的な非同期方法になっています。この方法のデモンストレーションについては、例3を参照してください。この方法はJSONPのものでも再生されます。つまり、スクリプトSRCのバックグラウンドスクリプト（PHPなど）を指定できます。このPHPは、事前に定義されたJavaScript関数を呼び出すために戻るJSON文字列であるJavaScript関数を返します。この例をご覧ください：T.JS（この例は、以前にWeiboで収集した非同期AJAXコールの小さな例です）
JSを非同期にオンデマンドでロードします
DOMメソッドの上記の例は、JavaScriptの非同期負荷の問題を解決しますが、指定した時点で実行したい問題は解決しません。したがって、上記のDOMメソッドを特定のイベントにバインドするだけです。
例えば：
window.loadイベントに結び付けられます - 例4
例4と例3の間の実行の違いを比較する必要があります。両方の例で、コードを強調表示してJavaScriptを使用して、コードの強調表示とalert.jsの実行を使用してスクリプトの実行を確認しました。あなたは違いを知っているでしょう）
コードコピーは次のとおりです。
window.load = loadjs（ "http://coolshell.cn/asyncjs/alert.js"）
特定のイベントに結び付けられています - 例5
コードコピーは次のとおりです。
<p style = "cursor：pointer" onclick = "loadjs（）">クリックしてalert.js </p>を読み込みます
この例は非常に簡単です。 DOM要素をクリックすると、Alert.jsが実際にロードされます。
もっと
ただし、特定のイベントへの拘束力は、JSの実際のダウンロードはクリック時にのみ行われるため、再び遅すぎるため、少し渡されるようです。さて、ここで究極の問題を投げる必要があります - JSファイルを非同期にユーザーのローカルエリアにダウンロードしたいが、実行したい場合にのみ実行する必要はありません。
次の方法があれば素晴らしいでしょう：
コードコピーは次のとおりです。
var script = document.createelement（ "script"）;
script.noexecute = true;
script.src = "alert.js";
document.body.AppendChild（スクリプト）;
//後でこれを行うことができます
script.execute（）;
残念ながら、これはただの美しい夢です。今日、私たちのJavaScriptはまだ比較的原始的であり、この「JS夢」はまだ実現されていません。
したがって、プログラマーはハックを使用してそれを行うことができます。
一部のプログラマーは、標準以外のスクリプトタイプを使用してJavaScriptをキャッシュします。のように：
コードコピーは次のとおりです。
<script type = cache/script src = "./ alert.js"> </script>
「キャッシュ/スクリプト」であるため、このことはブラウザではまったく解析できないため、ブラウザはJavaScriptとしてarert.jsを実行できませんが、JSファイルをダウンロードする必要があるため、実行できます。残念ながら、WebKitはHTML標準に厳密に従います - そのような認識されていないことについては、それらを直接削除して何もしません。それで、私たちの夢は再び壊れました。
したがって、もう少しハックする必要があります。 N nが何年も前にプリロード画像を再生したように、オブジェクトタグ（またはiframeタグ）を使用できます。したがって、次のコードがあります。
コードコピーは次のとおりです。
関数cachejs（script_filename）{
var cache = document.createelement（ 'object'）;
cache.data = script_filename;
cache.id = "coolshell_script_cache_id";
cache.width = 0;
cache.height = 0;
document.body.appendChild（キャッシュ）;
}
次に、最後にこの関数を呼び出します。関連する例：例6を参照してください
Ctrl+shit+iをChromeの下で押し、ネットワークページに切り替えてください。Alert.jsがダウンロードされていることがわかりますが、実行されていません。次に、ブラウザ側にはキャッシュがあるため、例5の方法を使用します。Alert.jsはサーバーからダウンロードされなくなります。したがって、実行速度を保証できます。
この種のプリロードに精通している必要があります。次のようなajaxメソッドを使用することもできます。
コードコピーは次のとおりです。
var xhr = new xmlhttprequest（）;
xhr.open（ 'get'、 'new.js'）;
xhr.send（ ''）;
これ以上言って例を挙げません。自分で試すことができます。
最後に、2つのJS、1つはControlJSで、もう1つはHeadjsです。これは、非同期負荷JavaScriptファイルを作成するために特別に使用されます。
わかりました、これはすべてのコンテンツです。 JavaScriptのロードと実行、およびそれを読んだ後の関連技術を理解できることを願っています。同時に、すべてのフロントエンドの専門家があなたにアドバイスを与えることを願っています！