<script>元素
向HTML页面插入JavaScript的主要方法，就是使用<script>元素。使用<script>元素的方式有两种：
1）直接在页面中嵌入JavaScript代码
2）包含外部JavaScript文件文件
方法一：在使用<script>元素嵌入JavaScript代码时，只须为<script>指定type属性。
包含在<script>元素内部的JavaScript代码将被从上至下依次解释。就拿前面这个例子来说，解释器会解析
一个函数的定义，然后将该定义保存在自己的环境当中。在解释器对<script>元素内部的所有代码求值完毕
之前，页面中的其余内容都不会被浏览器加载或显示。
方法二：如果要通过<script>元素来包含外部JavaScript文件，那么需要指定src属性。这个属性的值是一个
指向外部JavaScript文件的链接：
带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码。如果
包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。
<script>标签的位置
传统做法：将所有<script>元素放在页面的<head>元素中
Example HTML Page
在文档的<head>元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载，解析和执行完成以后，
才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于那些需要很多JavaScript代码的页面来说，
这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口将是一片空白。
现代做法：将所有JavaScript引用放在<body>元素页面内容的后面
Example HTML Page
此方法可以在解析包含的JavaScript代码之前，页面的内容已完全呈现在浏览器中。
延迟脚本
<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟
到这个页面都解析完毕后再运行。因此在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。
Example HTML Page
注意点：
1）defer属性只适用于外部脚本文件。
2）在这个例子中，虽然我们吧<script>元素放在文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。
3）延迟脚本总是按照它们定义的先后顺序执行，因此上例的example1.js会先于example2.js执行。
4）使用defer属性可以让脚本在文档完全呈现之后再执行。
5）延迟脚本会先于DOMContentLoaded事件触发前执行。
异步脚本
HTML5为<script>元素定义了async属性。使用async属性可以让脚本在文档完全呈现之后再执行。
Example HTML Page
注意点：
1）async属性只适用于外部脚本文件，并告诉浏览器立即下载文件。
2）与defer不同，标记为async的脚本并不保证定义它们的先后顺序执行。在以上代码中，第二个脚本文件可能会在第一个脚本文件之前执行。因此，确保两者之间互不依赖非常重要。
3）指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。因此，建议异步脚本不要在加载期间修改DOM。
4）异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。