第二章=》在HTML中使用JavaScript
在HTML中使用JavaScript
2.1 <script>元素
2.1.1 script元素的属性
async: 可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作。只对外部脚本有效。
charset: 可选。表示通过src属性指定的代码的字符集。
defer : 可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。
src: 可选。表示包含要执行代码的外部文件
type: 可选。 表示编写代码使用的脚本语言的内容类型。
2.1.2 解释顺序
a. 包含在<script>元素内部的JS代码将被从上至下一次解释，然后保存在自己的环境当中。在解释器对<script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。
b.如果要通过<script>元素来包含外部JS文件，那么src属性就是必须的。在解析外部JS文件时，页面的处理也会暂时停止。
2.1.3 标签的位置
现代Web应用程序一般都把全部JS引用放到<body>元素中页面后面，这样在解析包含的JS代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白时间的缩短而感到打开页面的速度加快了
2.1.4 延迟脚本
defer属性只适用于外部脚本文件，会使脚本延迟到整个页面都解析完毕后再运行。在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。
在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件前执行，因此最好只包含一个延迟脚本。
2.1.5 异步脚本
async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。所以要确保多个异步脚本之间互不依赖。
指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件出发之前或之后执行
2.2 选择嵌入代码还是外部文件
最好的做法还是尽可能使用外部文件来包含JS代码，使用外部文件的优点
- 可维护性
- 可缓存： 浏览器能够根据具体的设置缓存连接的所有外部JS代码。也就是说，如果有两个页面都是用同一个文件，那么这个文件只需下载一次。因此，最终结果就是能够加快页面加载的速度。
- 适应未来： 通过外部文件来包含JS无须使用XHTML或注释hack
2.3 文档模式
IE5.5引入了文档模式的概念，最初的两种文档模式是：混杂模式与标准模式。混杂模式会让IE的行为与（包含非标准特性的）IE5相同，而标准模式则让IE的行为更接近标准行为。虽然这两种模式主要影响CSS内容的呈现，但也会影响JS的解释执行。
如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的做法，因为不同浏览器在这种模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。
所以应该使用标准模式
<!DOCTYPE html>
2.4 小结
把JS插入到HTML页面中要使用<script>元素。使用这个元素可以把JS嵌入到HTML页面中，让脚本与标记混合在一起；也可以包含外部的JS文件。
在包含外部JS文件时，必须将src属性设置为指向相应文件的URL。而这个文件既可以是与它的页面位于同一个服务器上的文件，也可以是其他任何域中的文件。
在不使用defer 和 async属性的情况下，所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析
使用defer属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。
使用async 属性表示当前脚本不比等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。
