JavaScript高级程序设计3：第2章 在 HTML 中使用 JavaScript

<script>定义了6个属性：

2.1 <script>元素

• src属性可指向当前HTML页面所在域之外的某个域中的完整URL，表示包含要执行代码的外部文件。

• 无论如何包含代码，只要不存在defer和async属性，浏览器都会按照<script>元素在页面中出现的先后顺序对他们一次进行解析。

2.1.1 标签的位置

• 为了降低页面加载的时间，减少延迟，一般都把全部 JavaScript 引用放在 </body> 元素中页面内容的之前。

2.1.2 延迟脚本

• defer只适用于外部脚本文件

• 设置defer属性，相当于告诉浏览器立即下载脚本文件，但延迟执行，包含的脚本将延迟到浏览器遇到</html>标签后再执行。

• HTML5规范要求脚本按照出现的先后顺序执行：第一个延迟脚本将先于第二个延迟脚本执行，而这两个脚本将会先于DOMContentLoaded事件。

• 现实中延迟脚本不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。

• 把延迟脚本放在页面顶部仍是最佳选择。

2.1.3 异步脚本

• async只适用于外部脚本文件

• 设置该属性后相当于告诉浏览器立即下载脚本，目的是不让页面等待异步脚本下载和执行，从而异步加载页面的其他内容。

• 设置了属性为async的脚本并不保证按照指定它们的先后顺序执行，所以要确保各个异步脚本间的互不依赖。

• 异步脚本一定会在load事件之前执行，但与DOMContentLoaded不一定，可能在它之前执行，也可能在它之后执行。

2.2 嵌入代码与外部文件

最好的还是尽可能使用外部文件来包含JavaScript代码

• 可维护性

• 可缓存（如果有两个页面都使用同一个文件，那么这个文件只需下载一次）

• 适应未来

2.3 文档模式

• 通过使用文档类型（doctype）切换来实现

• 最初的两种文档模式——混杂模式、标准模式

• 如果最初在文档开始处没有发现文档类型声明，则所有浏览器都会默认为开启混杂模式（混杂模式下不同浏览器差异很大，不推荐）

2.4 元素<noscript>

用来在不支持JavaScript的浏览器中显示替代内容，有两种情况：

• 浏览器不支持脚本

• 浏览器支持脚本，但脚本被禁用

2.5 小结

• 将JavaScript代码插入到HTML页面，需要 <script> 元素。

• 在包含外部 JavaScript 文件时，必须将 <script> 元素的 src 属性设置为指向相应文件的 URL。

• 在不使用defer 和async 属性的情况下，所有 <script> 元素都会按照它们在页面中出现的先后顺序依次被解析。

• 建议将<script> 元素代码放在页面最后， </body> 标签前面。

• 使用 defer 属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。

• 使用 async 属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。

• 使用 <noscript> 元素可以指定在不支持脚本的浏览器中显示的替代内容。