script元素

• script元素可以包含在head元素中，也可以包含在body元素中，默认情况下是script同步加载、同步执行，等待执行完毕后，后面的才能开始执行

script src遇上内联代码

• 如果有script标记有src属性，script开始到结束标签内部的代码不会执行

// demo.js
console.log("demo");

<script src="demo.js">
  console.log("Hello World!");
</script>

// 输出结果：demo

script异步加载

• defer属性，可以让script元素异步加载、加载完成后不会立马执行，这个脚本会等待整个页面解析之后在运用，并且在DOMContentLoaded事件之前执行，如有多个defer加载的脚本会按照加载顺序依次执行
• 适合于多个脚本的顺序加载，需要操作DOM的情况

// 比如说example1.js加载5秒种，example2.js加载2秒钟
// example2会等待example1加载完并且执行后，在执行example2
<script defer src="example1.js"></script>
<script defer src="example2.js"></script>

• async属性，可以让script元素异步加载、加载完成后立马执行这个脚本，如有多个async加载的脚本无法保证他们的执行顺序

// 如有多个async加载的脚本无法保证他们的执行顺序
<script async src="example1.js"></script>
<script async src="example2.js"></script>

noscript标签

• noscript标签，当浏览器不支持script标签时，会显示noscript标签内的内容