您的位置：首页 > Web前端 > JavaScript

JS学习笔记 – 分析 JavaScript的执行顺序

2017-05-19 21:37 429 查看

在 HTML 文档中的执行顺序

js

代码执行顺序比较的形象，用户可以直观的感受这种执行顺序。但是，

js

代码的执行顺序是比较复杂的。有时候我们会把

js

代码写在

html

里面，而

html

文档在浏览器中解析的过程是这样：浏览器按照文档流从上到下逐步解析页面结构和信息。

js

代码作为嵌入的脚本也算做

html

文档的组成部分，因此，

js

代码在装载时的执行顺序也是根据脚本标签

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

还有对于通过脚本标签

<script>

的

src

属性导入的外部

js

文件脚本，它也将按照其语句出现的顺序来执行，而且执行过程是文档装载的一部分，不会因为是外部

js

文件而延期执行。

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

预编译

当

js

引擎解析的时候，它会在预编译对所有声明的变量和函数进行处理。

变量提升

Javascript

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

预解析函数

JavaScript

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

详细：javascript变量声明提升(hoisting)

分块执行代码

js

是按块执行代码的，所谓代码块就是使用

<script>

标签分隔的代码段。（下面一个栗子）

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

因为

js

是按代码块来执行的。浏览器在解析

html

文档流的时候，如果遇到一个

<script>

标签，则

js

会等到这个代码块都加载完之后再对代码进行预编译，然后在执行。执行完毕后，浏览器会继续解析西门的

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

执行的影响。同时，也避开了

html

文档流对

js

执行的限制。

最后，如果文章有什么错误和疑问的地方，请指出。与sf各位共勉！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航