高三（2）HTML 中使用 JavaScript

「爱情、让人受尽委屈。」 2021-09-19 01:54 226阅读 0赞

### 1.  内嵌 vs 外联 ###

在 HTML 中嵌入 JavaScript 代码没有什么问题， 但一般认为最好的做法还是尽可能使用外部文件来包含 JavaScript 代码 。

有以下优点 ：

1.  **可维护性**  ： HTML 和 JavaScript 分离，便于维护
2.  **可缓存** ： 浏览器能够根据具体的设置缓存链接的所有外部 JavaScript 文件。也就是说，如果有两个页面同时使用一个文件，那么这个文件只需下载一次。因此能加快页面加载速度。

### 2.  defer 和 async  ###

*  defer 属性可以让脚本在文档完全呈现之后再执行(浏览器遇到</html>后执行,但是会先于DOMContentLoaded事件前执行)。 但是不能保证延迟脚本的执行顺序，上述代码，有可能demo2.js先执行,(因此要确保引入的文件不要存在关联)
 *  async 属性可以表示当前脚本不必等待其他脚本(会先于页面的load事件前执行)，也不必阻塞文档呈现。但是不能保证异步脚本的执行顺序，同上。

> 所以把脚本放在页面底部执行仍然是最佳选择

**注意事项 ： **

**script标签在body标签内还是外**

许多人认为只要放在底部了，无论是“body标签闭合之前”还是在“body标签闭合之后”都是一样的，其实还是有差别的，因为从HTML 2.0起放在“body标签闭合之后”就是不合标准的。之所以但是浏览器却不会报错，是因为如果在“body标签闭合之后”后再出现script或任何元素的开始标签， 都是**parse error**，浏览器会忽略之前的</body>，即视作仍旧在body内。所以实际效果和写在“body标签闭合之前”之前是没有区别的。

所以，只要是让浏览器做了多余的事都是不好的，虽然差别细微，但是还是应该按照标准来，**放在body标签闭合之前。**