ホームページ >ウェブフロントエンド >jsチュートリアル >Javascriptの読み込みと実行を詳しく解説_基礎知識
Javascriptの読み込みと実行を詳しく解説_基礎知識
- WBOYオリジナル
- 2016-05-16 16:31:181231ブラウズ
まず最初に、JavaScript の読み込みと実行について話したいと思います。一般に、ブラウザには Javascript の実行に関する 2 つの大きな特徴があります。1) Javascript はロード直後に実行されます。2) 実行されると、それ以降のページのコンテンツ (ページのレンダリングや他のリソースのダウンロードを含む) がブロックされます。したがって、複数の js ファイルが導入されている場合、ブラウザーでは、これらの js ファイルがシリアルにロードされ、順番に実行されます。
JavaScript は HTML ドキュメントの DOM ツリーを操作する可能性があるため、ブラウザは通常、CSS ファイルのダウンロードと並行して js ファイルをダウンロードしません。これは、js ファイルの特殊性によって引き起こされるためです。したがって、JavaScript が後続の DOM 要素を操作したい場合、基本的にブラウザはオブジェクトが見つからないというエラーを報告します。 Javascript が実行されると、後続の HTML がブロックされ、DOM ツリー内に後続の DOM ノードが存在しないためです。したがって、プログラムはエラーを報告しました。
伝統的な方法
したがって、コードを記述するときは、次のコードを記述します。
基本的に、head 内の <script> タグは、後続のリソースの読み込みとページ全体の生成をブロックします。見ていただくために特別な例を作成しました: 例 1。 注: 私のalert.jsにはalert("hello world")という一文しかありません。これにより、JavaScriptが以下のものをどのようにブロックするかを簡単に確認できます。 </script>
これで、多くの Web サイトが Web ページの最後に JavaScript を配置したり、window.onload や docmuemt Ready などのイベントを使用したりする理由がわかりました。
さらに、ほとんどの Javascript コードはページを待つ必要がないため、非同期読み込み機能があります。では、どうやって非同期に読み込むのでしょうか?
document.write メソッド
つまり、document.write() を使えばブロックせずに問題を解決できると思うかもしれません。もちろん、document.write で <script> タグを記述した後、次のことを実行できると考えるでしょうが、これは正しいことです。これは同じ script タグ内の Javascript コードに当てはまりますが、ページ全体では依然としてブロックされます。 以下はテストコードです: </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="35700" class="copybut" id="copybut35700" onclick="doCopy('code35700')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code35700">
<br>
<script type="text/javascript" language="javascript"><br>
関数loadjs(script_filename) {<br>
document.write('<' 'script language="javascript" type="text/javascript"');<br />
document.write(' src="' script_filename '">');<br>
document.write('<' '/script' '>');<br>
alert("loadjs() 終了...");<br>
}<br>
var script = 'http://coolshell.cn/asyncjs/alert.js';<br>
Loadjs(スクリプト);<br>
alert("loadjs() が完了しました!");<br>
</script>
アラートの順序は何だと思いますか?さまざまなブラウザで試すことができます。閉じたいテスト ページは次のとおりです: 例 2。
スクリプトの遅延属性と非同期属性
IE は、IE6 以降、次のような遅延タグをサポートしています。
<スクリプト遅延 type="text/javascript" src="./alert.js" >
IE の場合、このタグにより IE は js ファイルを並行してダウンロードし、DOM 全体がロードされるまでその実行を保留します (DOMContentLoaded)。複数の defer <script> も出現順に実行されます。走ること。最も重要なことは、<script> が遅延に追加された後、後続の DOM レンダリングをブロックしないことです。ただし、この遅延は IE のみに適用されるため、一般的にはあまり使用されません。 </p>
<p>標準の HTML5 には、JavaScript の非同期読み込み用の属性 (async) も追加されています。どのような値を割り当てても、それが表示されている限り、js ファイルの非同期読み込みが開始されます。ただし、async の非同期ロードには重大な問題があります。つまり、「ロード後すぐに実行する」という軍事ルールを忠実に実行しているため、ページのレンダリングを妨げることはありませんが、順序とタイミングを制御することができません。彼の処刑の様子。この例を見て感覚を掴んでください。 </p>
<p>非同期タグをサポートするブラウザは次のとおりです: Firefox 3.6、Chrome 8.0、Safari 5.0、IE 10、Opera はまだサポートしていないため (ここから)、この方法はあまり良くありません。すべてのブラウザがそれを実行できるわけではないためです。 </p>
<p>DOM の動的作成</p>
<p>この方法はおそらく最も一般的に使用されます。 </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="53194" class="copybut" id="copybut53194" onclick="doCopy('code53194')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code53194">
<br>
function loadjs(script_filename) {<br>
var script = document.createElement('script');<br>
script.setAttribute('type', 'text/javascript');<br>
script.setAttribute('src', script_filename);<br>
script.setAttribute('id', 'coolshell_script_id');<br>
<br>
script_id = document.getElementById('coolshell_script_id');<br>
If(script_id){<br>
document.getElementsByTagName('head')[0].removeChild(script_id);<br>
}<br>
Document.getElementsByTagName('head')[0].appendChild(script);<br>
}<br>
<br>
var script = 'http://coolshell.cn/asyncjs/alert.js';<br>
loadjs(スクリプト);<br>
</div>
<p>このメソッドは、js ファイルを非同期でロードするためのほぼ標準的な方法となっています。このメソッドのデモについては、例 3 を参照してください。このメソッドは JSONP でも活用されています。つまり、スクリプトの src にバックグラウンド スクリプト (PHP など) を指定できます。この PHP は、パラメーターが json 文字列である JavaScript 関数を返し、事前定義された JavaScript を呼び出します。関数。この例を見てみましょう: t.js (この例は、私が以前 Weibo で募集した非同期 Ajax 呼び出しの小さな例です) </p>
<p>オンデマンドで js を非同期的にロードします</p>
<p>上記の DOM メソッドの例は、JavaScript の非同期ロードの問題を解決しますが、指定したタイミングで実行したいという問題は解決しません。したがって、上記の DOM メソッドを特定のイベントに結び付けるだけで済みます。 </p>
<p>例: </p>
<p>window.load イベントに関連付ける - 例 4</p>
<p>例 4 と例 3 の実行の違いを比較する必要があります。特に、両方の例でコードを強調表示する JavaScript を使用して、コードの強調表示スクリプトの実行と実行を確認しました。アラートの実行に基づいて違いがわかるでしょう。 .js)</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="34632" class="copybut" id="copybut34632" onclick="doCopy('code34632')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code34632">
<br>
window.load = loadjs("<a href="http://coolshell.cn/asyncjs/alert.js">http://coolshell.cn/asyncjs/alert.js</a>")<br>
</div>
<p>特定のイベントに関連付ける - 例 5</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="16878" class="copybut" id="copybut16878" onclick="doCopy('code16878')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code16878">
<br>
<p style="cursor: pointer" onclick="LoadJS()">クリックしてalert.jsをロード</p><br>
</div>
<p>この例は非常に簡単です。 DOM 要素をクリックすると、alert.js が実際にロードされます。 </p>
<p>もっと見る</p>
<p>ただし、特定のイベントにバインドするのは少しやりすぎのようです。js はクリックされたときにのみ実際にダウンロードされるため、遅すぎます。さて、ここで究極の質問になります。js ファイルをユーザーのローカル領域に非同期でダウンロードしますが、実行はせず、実行したい場合にのみ実行したいと考えています。 </p>
<p>次のようなものがあれば素晴らしいでしょう: </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="43581" class="copybut" id="copybut43581" onclick="doCopy('code43581')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code43581">
<br>
var script = document.createElement("script");<br>
script.noexecute = true;<br>
script.src = "alert.js";<br>
document.body.appendChild(script);<br>
<br>
//We can do this later<br>
script.execute();<br>
</div>
<p>Unfortunately, this is just a beautiful dream. Today our Javascript is still relatively primitive, and this "JS dream" has not yet been realized. </p>
<p>So, our programmers can only use hacking methods to do it. </p>
<p>Some programmers use non-standard script types to cache javascript. Such as: </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="63471" class="copybut" id="copybut63471" onclick="doCopy('code63471')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code63471">
<br>
<script type=cache/script src="./alert.js"></script>
Because of "cache/script", this thing cannot be parsed by the browser at all, so the browser cannot execute alert.js as javascript, but it has to download the js file, so it can be solved. It's a pity that webkit strictly complies with the standards of HTML-for things you don't recognize, just delete them and do nothing. So, our dream was shattered again.
So, we need to hack again, just like how we played with preload images many years ago, we can use the object tag (or iframe tag), so we have the following code:
function 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(cache);
}
Then, we call this function at the end. Please take a look at the relevant examples: Example 6
Press Ctrl Shit I in Chrome and switch to the network page. You can see that alert.js has been downloaded but not executed. Then we will use the method in Example 5 because there is a cache on the browser side and it will not be executed again. Download alert.js from the server. Therefore, the execution speed can be guaranteed.
You should be familiar with this kind of preload. You can also use Ajax, such as:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'new.js');
xhr.send('');
I won’t say much more here, nor will I give examples. You can try it yourself.
Finally, let me mention two js, one is ControlJS and the other is called HeadJS, which is specially used to load javascript files asynchronously.
Okay, this is all the content. I hope that after reading it, you can have an understanding of Javascript loading and execution, as well as related technologies. At the same time, I also hope that all front-end experts will give you some advice!