ホームページ > 記事 > ウェブフロントエンド > JavaScript_javascript スキルの実行順序に関する簡単な説明
JavaScript_javascript スキルの実行順序に関する簡単な説明
- WBOYオリジナル
- 2016-05-16 15:46:291114ブラウズ
最近のブラウザーは JavaScript を並行してダウンロードできますが (一部のブラウザー)、JavaScript の依存関係を考慮して、それらの実行は依然として導入された順序で実行されます。
この記事は、記憶を深め、後で見直すために整理して記録するために、JavaScript を学習中に本を読んで学んだことの一部を記録します。
HTML ドキュメントでの実行順序
jsコードの実行順序を比較したイメージで、ユーザーはこの実行順序を直感的に感じることができます。ただし、js コードの実行順序はさらに複雑です。 HTML で JS コードを記述することがありますが、ブラウザーで HTML ドキュメントを解析するプロセスは次のとおりです。ブラウザーはドキュメント フローに従って、ページの構造と情報を上から下に徐々に解析します。埋め込みスクリプトとして、js コードも html ドキュメントのコンポーネントとみなされます。そのため、読み込み中の js コードの実行順序も、スクリプト タグ <script> の出現順序に基づいて決定されます。 (下の栗) </script>
<!DOCTYPE html>
<script>
console.log("顶部脚本");
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
console.log("头部脚本");
</script>
</head>
<body>
<script>
console.log("页面脚本");
</script>
</body>
</html>
<script>
console.log("底部脚本");
</script>
スクリプト タグ 3f1c4e4b6b16bbbd69b2ee476dc4f83a の src 属性を通じてインポートされた外部 JS ファイル スクリプトの場合も、そのステートメントが出現する順序で実行され、実行プロセスはドキュメントの読み込みの一部です。これは外部 JS ドキュメントであり、実行が延期されています。
// 先加载 b.js 并且执行里面的代码 <script src="b.js"></script> // 然后在按顺序执行下面的代码 <script> console.log(1); </script>
コンパイル済み
JS エンジンは解析するときに、宣言されたすべての変数と関数をプリコンパイルします。
可変プロモーション
console.log(a); // undefined var a = 1; console.log(a); // 1
準備関数
f(); // 1
function f() {
console.log(1);
};
詳細: JavaScript 変数宣言のホイスティング
コードをチャンクで実行します
JS は、ブロック内のコードを実行します。いわゆるコード ブロックは、<script> タグで区切られたコード セグメントです。 (下の栗) </script>
<script>
// 代码段1
var a = 1;
</script>
<script>
// 代码段2
function f() {
console.log(1);
};
</script>
js はコードブロックで実行されるため。ブラウザーが HTML ドキュメント ストリームを解析するときに、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグが見つかった場合、js はコード ブロックが読み込まれるまで待機してから、コードをプリコンパイルして実行します。実行後、ブラウザは Ximen の HTML ドキュメント フローの解析を継続し、js は次のコード ブロックを処理する準備が整います。
js はブロック内で実行されるため、後続のブロックで宣言された変数や関数を js ブロック内で呼び出すと、構文エラーが発生します。ただし、異なるブロックはグローバル スコープに属します。つまり、ブロック間の変数や関数は共有できます。 (下の栗)
<script>
// 代码段1
console.log(a);
f();
</script>
<script>
// 代码段2
var a = 1;
function f() {
console.log(1);
};
</script>
js はコードをブロック単位で処理し、HTML ドキュメント フローの解析順序に従うため、上記の例では構文エラーが表示されます。ただし、ドキュメントストリームをロードした後に再度アクセスした場合、このエラーは発生しません。 (下の栗)
<script>
window.onload = function(){ // 页面初始化事件处理函数
// 代码段1
console.log(a);
f();
}
</script>
<script>
// 代码段2
var a = 1;
function f() {
console.log(1);
};
</script>
セキュリティ上の理由から、ネットワーク速度による js 実行への影響を避けるため、js コードの実行は通常、ページが初期化された後にのみ許可されます。同時に、js 実行時の html ドキュメント フローの制限も回避されます。
要約すると、JavaScript の実行手順は次のとおりです:
1. 最初のコードブロックを読みます
2. コードブロックの構文解析を実行します。構文エラーがある場合は、直接ステップ 5 に進みます。