Home > Article > Web Front-end > A brief discussion on the execution order of JavaScript_javascript skills

A brief discussion on the execution order of JavaScript_javascript skills

WBOYOriginal: 2016-05-16 15:46:291111browse

Although modern browsers can download JavaScript in parallel (some browsers), considering the dependencies of JavaScript, their execution is still carried out in the order of introduction.

This article records some of the things I learned from reading books while learning JavaScript, to deepen my memory and organize and record them for later review.

Execution order in html document

The image of js code execution order comparison, users can intuitively feel this execution order. However, the execution order of js code is more complicated. Sometimes we write js code in html, and the process of parsing the html document in the browser is as follows: the browser gradually parses the page structure and information from top to bottom according to the document flow. As an embedded script, js code is also considered a component of the html document. Therefore, the execution order of the js code during loading is also determined based on the order in which the script tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a appears. (The chestnut below)

<!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>

Also for external js file scripts imported through the src attribute of the script tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a, it will also be executed in the order in which its statements appear, and the execution process is part of the document loading, not because it is an external js document and postponed execution.

// 先加载 b.js 并且执行里面的代码
<script src="b.js"></script>
// 然后在按顺序执行下面的代码
<script>
  console.log(1);
</script>

Pre-compiled

When the js engine parses, it will pre-compile all declared variables and functions.

Variable promotion

console.log(a); // undefined
var a = 1;
console.log(a); // 1

Preparse function

f(); // 1
function f() {
  console.log(1);
};

Details: JavaScript variable declaration hoisting

Execute code in chunks

JS executes code in blocks. The so-called code blocks are code segments separated by 3f1c4e4b6b16bbbd69b2ee476dc4f83a tags. (The chestnut below)

<script>
  // 代码段1
  var a = 1;
</script>
<script>
  // 代码段2
  function f() {
    console.log(1);
  };
</script>

Because js is executed in code blocks. When the browser parses the HTML document stream, if it encounters a 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag, js will wait until the code block is loaded before precompiling the code and then executing it. After execution, the browser will continue to parse Ximen's HTML document flow, and js will be ready to process the next code block.

There is a small pitfall. Since js is executed in blocks, calling variables or functions declared in subsequent blocks in a js block will prompt a syntax error. But different blocks belong to a global scope, that is to say, variables and functions between blocks can be shared. (The chestnut below)

<script>
  // 代码段1
  console.log(a);
  f();
</script>
<script>
  // 代码段2
  var a = 1;
  function f() {
    console.log(1);
  };
</script>

Since js processes code in blocks and follows the parsing order of html document flow, you will see syntax errors in the above example. However, this error will not occur when accessing again after the document stream is loaded. (The chestnut below)

<script>
  window.onload = function(){ // 页面初始化事件处理函数
    // 代码段1
    console.log(a);
    f();
  }
</script>
<script>
  // 代码段2
  var a = 1;
  function f() {
    console.log(1);
  };
</script>

For security reasons, js code execution is generally allowed only after the page is initialized, so as to avoid the impact of some network speed on js execution. At the same time, it also avoids the restrictions of html document flow on js execution.

To sum up, the steps of JavaScript execution are:

1. Read the first code block first

2. Perform syntax analysis on the code block. If there is a syntax error, go to step 5 directly

3. "Precompile" the functions defined by var variables and function (assignment functions will not be precompiled)

4. Execute the code block and report an error if there is an error

5. If there is the next code block, read the next code block and repeat step 2

6. End

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery realizes the menu shaking effect of web page shaking_jqueryNext article：jQuery realizes the menu shaking effect of web page shaking_jquery

See more

A brief discussion on the execution order of JavaScript_javascript skills

Related articles