javaScript代码何时执行

javaScript引入位置

• 一般在Head标签中引入css
• 在body最后引入js文件

好久没用JavaScript了，这里开始学习下。在学习WEUI时(http://www.jqweui.cn/download)，下面的注释引起了我的注意。这里看着他们引入的位置还是有区别的。

<!-- head 中 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">

<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>

为此特意百度了一下,加上自己实验,才有了一些理解。

• javacript是根据 <script>顺序来执行的,写在前面的标签中的代码会被先执行。

上面的注释告诉我们导入js代码写在body的最后，为什么会这样?
因为一般情况下，在文档标签中包含js脚本或者导入的js文件。这意味着必须等到全部js代码都被执行完以后才能继续解析后面的HTML部分。

下面是实验时的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>armwind</title>
    <link rel="stylesheet" href="jquery-weui.min.css">
    <link rel="stylesheet" href="weui.min.css">
    <script>
        alert("armwind1")
    </script>
</head>
<body>
<a href="javascript:;" class="weui-btn weui-btn_primary">按钮</a>

<script src="jquery-weui.min.js"></script>
<script src="jquery.min.js"></script>

<script>
  alert("armwind2");
</script>
<script>
  alert("armwind3");
</script>
</body>
</html>

执行结果:
下面能够看到在先显示armwind1，然后在显示armwind2的时候，绿色按钮已经被渲染到浏览器中了。这说明解析JavaScript和解析body的html标签是同时进行的。所以在上面的注释中说要把js文件放到body标签的最后。

上面测测试例子，我把JavaScript放到body标签内部了。这在正式开发时，代码会显示有点乱。一般会在外面body外面在加一个<scritp>标签.

<body>
<script>
    console.log("this is body");
</script>
</body>
<script>
  console.log("hello world1")

  (function() {
    console.log('this is armwind');
  })();

运行结果：
这里运行结果能在最后面看到一个错误，这个需要在console.log("hello world1")后面加一个;就可以解决了。

正确的结果

上面能看到body中的<script>比下面的<script>要提前运行。此外在在body下面的script可以执行，所以我目前总结2条JavaScript执行顺序

• 直接调用：
  不言而喻，直接调用JavaScript方法执行
• 方法定义时调用
  这个是在定义函数时直接调用,形如下面的定义和调用。

  (function() {
    console.log('this is armwind');
  })();