ホームページ > 記事 > ウェブフロントエンド > HTML での js の読み込みと実行順序、および複数の jquery Ready の実行順序についての簡単な説明
HTML での js の読み込みと実行順序、および複数の jquery Ready の実行順序についての簡単な説明
- 高洛峰オリジナル
- 2016-12-05 10:38:071228ブラウズ
jQuery $(document).ready() 実行シーケンス:
ページのすべての DOM 要素が読み込まれた後に .ready() を実行します。 $(document).ready() は、DOM 構造が描画された後、ロードされるまで待たずに実行されます。
.ready() が実行される前に JavaScript コードがある場合、JavaScript はどのように実行されますか?
答えは、まず .ready() の前に JavaScript コードを実行してから、.ready() を実行することです。
複数の $(document).ready() の実行順序は単純な逐次実行ではなく、ネストレベルとも一定の関係があります。
---------------------js読み込み実行シーケンス-------------------------- --
1. 読み込み順序: 導入タグ b97cb247ad0c0836255176e480ef452b が表示される順序
ページ上の Javascript コードは HTML ドキュメントの一部であるため、ページが実行される順序。ロードされる順序は、導入タグ b97cb247ad0c0836255176e480ef452b の出現順序、b97cb247ad0c0836255176e480ef452b タグ内の外部 JS または src 経由でインポートされた JS は、ステートメントが出現する順序で実行されます。このプロセスはドキュメントの読み込みの一部です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题 3</title>
<script>
alert("1-最先执行");
</script>
</head>
<body onload="alert('3-最后执行');">
<script>
alert("2-接着执行");
</script>
</body>
</html>2. 各スクリプトで定義されたグローバル変数と関数は、後から実行されるスクリプトから呼び出すことができます。
変数への呼び出しは事前に宣言されている必要があります。宣言されていない場合、取得される変数値は未定義になります。
<script type="text/javscrpt">//<![CDATA[ alert(tmp); //输出 undefined var tmp = 1; alert(tmp); //输出 1//]]> </script>
3. 同じスクリプト内で、関数定義が関数呼び出しの後に現れる場合がありますが、それが 2 つのコードにあり、関数呼び出しが最初のコードにある場合は、未定義関数エラーが発生します。報告されます。
<script type="text/javscrpt">//<![CDATA[
aa(); //浏览器报错//]]>
</script>
<script type="text/javscrpt">//<![CDATA[
aa(); //输出 1
function aa()
{
alert(1);
}//]]>
</script>
4.document.write() は、スクリプトドキュメントの場所に出力を書き込みます。ブラウザは、documemt.write() が配置されているドキュメントのコンテンツを解析した後、 document.write() によって出力されたコンテンツ
その後、HTML ドキュメントの解析を続けます。
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"><//script>');
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("我是" + tmpStr);');
document.write('<//script>'); //]]>
</script>
<script type="text/javascript">//<![CDATA[
alert(3); //]]>
</script> test.js的内容是：
var tmpStr = 1;
alert(tmpStr);
Firefox と Opera のポップアップ値の順序は 1、2、私は 1、3 です
IE のポップアップ値の順序は 2、 1、3、そしてブラウザーはエラーを報告します: tmpStr は未定義です
その理由は、IE が document.write の場合、次の行を実行する前に SRC 内の Javascript コードがロードされるのを待たないためである可能性があります。そのため、2 がポップされます。まず
を実行し、document.write('document. write("I am" + tmpStr)') が tmpStr を呼び出すと、tmpStr が定義されておらず、エラーが報告されます。
この問題を解決するには、HTML 解析を使用して 1 つの HTML タグを解析し、次のタグを実行してコードを分割します。
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"><//script>');
//]]>
</script>
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("我是" + tmpStr);');
document.write('<//script>');
//]]>
</script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]>
</script>
このようにして、出力値の順序は次のようになります。 IE と他のブラウザでも同じです 同じです: 1、2、私は 1、3
概要: IE では、Document.Write メソッドを使用して js ファイルを参照すると、js ファイルが直接呼び出されますロードされる前に、参照される JS ファイルを別のスクリプト ブロックに配置することをお勧めします。参照された js ファイルが完全にロードされていることを確認するには、次の Document.Write content を実行し続けます
5. 同じ名前の JS 関数の実行シーケンス
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function aa() {
alert('First aa')
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<br />
<input id="Button1" type="button" value="button" onclick="aa();"/>
</form>
</body>
<script type="text/javascript">
function aa(s) {
alert('Second aa');
}
function aa(s) {
alert('Last aa');
}
</script>
</html>
「ボタン」をクリックすると、実行結果: 最後の aa
js に表示される 同じ名前の関数の後、Web ページで js 関数を呼び出すと、ページに最後に読み込まれた関数が常に呼び出されます。