写在之前
使用<script>元素
- <script>的属性
- async属性，这是一个可选的属性，用于告诉浏览器不必等到脚本下载和执行完后再加载页面，只对外部脚本有效。
- defer属性，这是一个可选的属性，用于告诉浏览器立即下载脚本，但等到页面加载完毕再执行。
defer和async的区别：
- 当有多个外部脚本时，执行顺序不同：
<script src="url1" defer="defer"></script>
<script src="url2" defer="defer"></script>
多个外部脚本在defer之后，执行顺序不变，保证第一个外部脚本在第二个外部脚本之前执行。
<script src="url1" async="async"></script>
<script src="url2" async="async"></script>
多个标记为async的外部脚本并不能保证它们按照出现的顺序执行，第二个脚本可能先于第一个脚本执行
- 下载和执行不同：
图中，net过程表示下载脚本。
- 如果不指定async属性和defer属性，那么下载脚本和执行脚本的过程中都会阻塞页面渲染。
- 如果指定defer属性，那么下载脚本会在页面渲染的同时进行，等到页面渲染完毕再执行脚本。
- 如果使用async属性，那么下载脚本会和页面渲染同时进行，在下载完毕后，就执行脚本，在执行脚本过程中会阻塞页面渲染。
- type属性，这是一个可选的属性，用于表示代码块中脚本语言的内容类型(MIME类型)，按照惯例这个属性的值一般都是"text/javascript"，如果属性值是"module"，那么代表代码块会被当成ES6模块，只有在这时代码块中才能出现import和export关键字。
-
使用<script>的两种方式
- 行内脚本
<script> function sayHi() { alert("Hi"); } </script>
行内脚本就是直接把JavaScript代码放在<script>中，行内脚本不能设置async属性和defer属性，这就表示行内脚本在执行时会阻塞页面。
- 外部脚本
<script src=""></script>
使用src属性可以引入外部脚本，外部脚本如果没有设置defer属性和async属性，在外部脚本的下载和执行过程中都会阻塞页面。
如果在设置src属性的<script>元素中加入了行内脚本，浏览器会忽略行内脚本。
- <script>位置对页面渲染速度的影响
把<script>标签放到<body>元素中其他所有元素的后面，可以使浏览器在处理JavaScript之前完成页面渲染。
浏览器在遇到<body>标签之后开始渲染，在完成渲染之前，浏览器窗口完全空白。