ホームページ > 記事 > ウェブフロントエンド > htmlでのjsの読み込みと実行順序を詳しく解説

htmlでのjsの読み込みと実行順序を詳しく解説

高洛峰オリジナル: 2017-03-12 17:47:111816ブラウズ

jsHTMLでのロード実行順序

1. ロード順序: タグb97cb247ad0c0836255176e480ef452bの出現順序を紹介します。

ページ上のJavascriptコードはHTMLドキュメントの一部です。ページがロードされるときの実行順序は、導入されたタグ b97cb247ad0c0836255176e480ef452b 内の外部 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(&#39;3-最后执行&#39;);"> 
<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>

document
.write() は、スクリプトドキュメントの場所に出力を書き込みます。ブラウザは、documemt.write() が配置されているドキュメントのコンテンツを解析した後、コンテンツの解析を続けます。 document.write() による出力その後、HTML ドキュメントの解析を続けます。

<script type="text/javascript">//<![CDATA[    
  document.write(&#39;<script type="text/javascript" src="test.js"><//script>&#39;);
  document.write(&#39;<script type="text/javascript">&#39;);    
  document.write(&#39;alert(2);&#39;)    
  document.write(&#39;alert("我是" + tmpStr);&#39;);    
  document.write(&#39;<//script>&#39;);    //]]>
</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 解析を使用して
HTML タグ
を解析し、次の原則を実装してコードを分割して実現します:
4ec11beb6c39d0703d1751d203c17053//164c66565a89f6b6749e9f96855529f4b294a02d2a53c7a839b9976353068ee2'); 4ec11beb6c39d0703d1751d203c17053 // document.write('4ec11beb6c39d0703d1751d203c17053');
document.write('alert( 2);')
document.write('alert( "I am" + tmpStr);');
document.write('b294a02d2a53c7a839b9976353068ee2');
//]]>
の出力値の順序プロセッサは常に同じです: 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(&#39;First aa&#39;)
    }   
</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(&#39;Second aa&#39;);
    }
function aa(s) {
        alert(&#39;Last aa&#39;);
    }
</script>
</html>

「ボタン」をクリックして結果を実行します: Last aa

After同じ名前の関数が js に表示されます。Web ページで js 関数を呼び出した後は、ページに最後に読み込まれた関数が常に呼び出されます。

以上がhtmlでのjsの読み込みと実行順序を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：知っておくべき 10 の珍しい HTML タグ次の記事：知っておくべき 10 の珍しい HTML タグ

続きを見る