前端基础知识：Script标签：向html插入js的方法

所有<script>元素会按照在页面出现的先后顺序依次被解析，没有 defer 或 async，浏览器会立即加载并执行指定的脚本, 只有解析完前面的script元素的内容后，才会解析后面的代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20913.html

使用<script>的两种方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20913.html

1. 页面中嵌入script代码， 只需指定type属性

<script type="text/javascript">
  // 内部不能出现'</script>'字符串，如果必须出现，必须使用转义标签‘\’
  function sayHi() {
    console.log('hihihi');
    alert('<\/script>');
  }
</script>

包含在<script>元素内的代码会从上而下依次解释，在解释器对<script>元素内的所有代码求值完毕之前，页面中的其余内容都不会被浏览器加载或显示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20913.html

1. 包含外部js文件, src属性是必须的。

<script src="example.js"></script>
// 带有src属性的元素不应该在标签之间包含额外的js代码，即使包含，只会下载并执行外部文件，内部代码也会被忽略。

与嵌入式js代码一样, 在解析外部js文件时，页面的处理会暂时停止。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20913.html

改变脚本行为的方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20913.html

1. defer: 立即下载，延迟执行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20913.html

加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20913.html

会先与DOMContentLoaded事件执行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20913.html

延迟脚本总会按照指定他们的顺序执行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20913.html

<script defer="defer" src="example.js"></script>

2. async: 异步脚本文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20913.html

加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20913.html

一定会在load事件之前执行，可能会在DOMContentLoaded事件之前或之后执行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20913.html

不能保证异步脚本按照他们在页面中出现的顺序执行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20913.html

<script async="async" src="example.js"></script>

区别：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20913.html

1. defer 和 async 在网络读取（下载）是一样的，都是异步的（相较于 HTML 解析）
2. 它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的
3. 关于 defer，它是按照加载顺序执行脚本的
4. async 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行
5. async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics