ページロード時のJavaScriptコードの実行順序のご紹介_基礎知識

1. HTML に Javascript を埋め込む方法
1. <script> と <BR> のタグの間に Javascript コードを直接配置します。属性は外部 JS ファイルを指定します <BR> 3. これをイベント ハンドラーに配置します。例: <p onclick="alert('I am a Javascript selected by the onclickevent')">Click me</script>

> ;
4. この URL は、URL の本体として、次のような特殊な JavaScript: プロトコルを使用します。 ;Click me< ;/a>
5. JavaScript 自体の document.write() メソッドを使用して新しい JavaScript コードを作成します
6. Ajax を使用して JavaScript コードを非同期に取得し、実行します

3番目と4番目のメソッドで書かれたJavaScriptは実行するためにトリガーする必要があるため、特別に設定しない限り、ページの読み込み時に実行されません。

2. ページ上で Javascript が実行される順序
1. ページ上の Javascript コードは HTML ドキュメントの一部であるため、ページが読み込まれるときに Javascript が実行される順序は次のとおりです。導入タグ <script></script> 内にある外部 JS、または src を通じて導入された外部 JS は、そのステートメントが出現する順序で実行され、実行プロセスはドキュメントの読み込みの一部です。
2. 各スクリプトで定義したグローバル変数や関数は、後から実行するスクリプトから呼び出すことができます。
3. 変数の呼び出しは事前に宣言されている必要があります。宣言されていない場合、取得される変数の値は未定義になります。

コードをコピー コードは次のとおりです:

4. 同じスクリプト内で、関数定義は関数呼び出しの後に記述できますが、それが 2 つのコードにあり、関数呼び出しが最初のコードにある場合は、コードの部分では、関数の未定義エラーが報告されます。

コードをコピー コードは次のとおりです:

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

コードをコピー コードは次のとおりです:

');
ドキュメント.write( '');
//]]>

test.js の内容は次のとおりです:

コードをコピーします コードは次のとおりです。

var tmpStr = 1;
alert(tmpStr);

•Firefox と Opera のポップアップ値の順序は、1、2、私は 1、3
•次のポップアップ値の順序です。 IE は: 2、1、3 で、ブラウザはエラーを報告します: tmpStr は利用できません
を定義する理由は、IE がドキュメント中に次の行を実行する前に SRC 内の Javascript コードがロードされるのを待たなかったためである可能性があります.write、つまり 2 が最初にポップアップし、document.write('document.write(" tmpStr, "tmpStr)') を呼び出したところ、tmpStr が定義されておらず、エラーが報告されました。

この問題を解決するには、HTML 解析の原則を使用して 1 つの HTML タグを解析し、次のタグを実行し、コードを分割してこれを実現します。

コードをコピー コードは次のとおりです:

');
//]]>
');
//]]>

このようにして、IE などで値が出力されますブラウザ 順序は常に同じです: 1、2、私は 1、3。

3. ページ上の Javascript の実行順序を変更する方法
1. onload

を使用してコード コードは次のとおりです:

出力値のシーケンスは 2、1 です。

複数の winodws.onload がある場合、最も効果的なものだけが有効になることに注意してください。解決策は次のとおりです。

コードをコピーします コードは次のとおりです:

window.onload = function(){f();f1();f2();....}

レベル 2 DOM イベント タイプを使用します

コードをコピーします コードは次のとおりです:

if(document.addEventListener ){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
} else{
window .attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}

2 defer は IE で使用できます。 defer の機能は、コードをロードすることであり、ドキュメントがロードされた後に実行されます。ただし、 window.onload の制限はありません。 window.onload は再利用できますが、IE でのみ有効なので、上記の例は次のように変更できます。

Copy code コードは次のとおりです:

');
document.write('');
//]]>

この方法では、IE ではエラーが報告され、出力値の順序は次のようになります: 1、3、2、私は 1

HTML パーサーはスクリプトを検出すると、通常、ドキュメントの解析を終了し、スクリプトが実行されるまで待機する必要があります。この問題を解決するために、HTML4 標準では defer が定義されています。 defer を使用すると、ブラウザーに HTML ドキュメントの解析を続行し、スクリプトの実行を遅らせるように求められます。この遅延は、スクリプトが外部ファイルからロードされる場合に非常に役立ちます。そのため、ブラウザは実行を続行する前にすべての外部ファイルがロードされるのを待つ必要がなくなり、パフォーマンスが効果的に向上します。現在 IE は defer 属性をサポートする唯一のブラウザですが、遅延スクリプトは次の遅延していないスクリプトまで遅延するだけでなく、常にドキュメントの終わりまで遅延されるため、IE は defer 属性を正しく実装しません。これは、IE での遅延スクリプトの実行順序が非常にわかりにくく、後続の非遅延スクリプトで必要のない関数や変数を定義できないことを意味します。 IE でのすべての遅延スクリプトの実行時間は、HTML ドキュメント ツリーが確立された後、window.onload 前である必要があります。

3. Ajax を使用します。
xmlhttpRequest は外部ドキュメントの読み込みステータスを判断できるため、コードの読み込み順序を変更できます