ホームページ > 記事 > ウェブフロントエンド > JavaScript_javascript スキルの実行順序に関する簡単な説明

JavaScript_javascript スキルの実行順序に関する簡単な説明

WBOYオリジナル: 2016-05-16 15:46:291085ブラウズ

最近のブラウザーは 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 に進みます。

3. var 変数と関数で定義された関数を「プリコンパイル」します (代入関数はプリコンパイルされません)

4. コードブロックを実行し、エラーがある場合はエラーを報告します

5. 次のコードブロックがある場合は、次のコードブロックを読み取り、ステップ 2 を繰り返します

6.終了

声明：

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

前の記事：jQueryでWebページのメニューシェイク効果を実現 Shaking_jquery次の記事：jQueryでWebページのメニューシェイク効果を実現 Shaking_jquery

続きを見る

JavaScript_javascript スキルの実行順序に関する簡単な説明

関連記事