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

时间 2019-11-06

标签学习笔记分析 javascript 执行顺序栏目 JavaScript 繁體版

原文原文链接

本文章记录本人在学习 JavaScript 中看书理解到的一些东西，加深记忆和而且整理记录下来，方便以后的复习。javascript

在 html 文档中的执行顺序

js代码执行顺序比较的形象，用户能够直观的感觉这种执行顺序。可是，js代码的执行顺序是比较复杂的。有时候咱们会把js代码写在html里面，而html文档在浏览器中解析的过程是这样：浏览器按照文档流从上到下逐步解析页面结构和信息。js代码做为嵌入的脚本也算作html文档的组成部分，所以，js代码在装载时的执行顺序也是根据脚本标签<script>的出现来顺序来决定。（下面一个栗子）html

<!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文件而延期执行。java

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

预编译

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

变量提高浏览器

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

预解析函数安全

JavaScriptf(); // 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也准备好处理下一个代码块。code

有个小坑，因为js是按块执行的，所以在一个js块中调用后面块声明的变量或者函数就会提示语法错误。可是不一样块都属于一个全局做用域，也就是说，块之间的变量和函数是能够共享的。（下面一个栗子）htm

<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各位共勉！