JS执行顺序预编译

Posted 2020-10-07 前端小小小小小小小白

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

变量提升

console.log(a); // undefined
var a = 1;
console.log(a); // 1
预解析函数

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执行的限制。