标签在 HTML 中的作用，简单来说，就是告诉浏览器：嘿，这里有一段 JavaScript 代码，你得执行它！它允许你在 HTML 文档中嵌入或引用外部 JavaScript 文件，从而实现网页的动态效果和交互功能。引入方式则有两种，一种是直接把代码写在 标签里，另一种是通过 标签的 src 属性链接外部 JS 文件。
嵌入 JavaScript 代码和链接外部 JS 文件是实现网页动态效果的两种主要方式。
为什么应该把 JavaScript 代码放在单独的文件里？
其实，把 JavaScript 代码直接写在 HTML 文件里挺方便的，尤其是在代码量比较少的时候。但是，当项目变得越来越大，代码越来越多，这样做就会带来一些问题。
立即学习“前端免费学习笔记（深入）”；
首先，HTML 文件会变得非常臃肿，加载速度会变慢。想象一下，一个几千行的 HTML 文件，里面夹杂着大量的 JavaScript 代码，浏览器需要解析整个文件才能开始渲染页面，这肯定会影响用户体验。
其次，代码的可维护性会变得很差。如果 JavaScript 代码和 HTML 代码混在一起，修改起来会非常麻烦，而且容易出错。如果要在一个页面中使用相同的 JavaScript 代码，你需要在每个页面都复制一遍，这不仅浪费时间，而且容易出错。
再者，浏览器缓存机制对外部 JavaScript 文件更友好。浏览器会对外部 JavaScript 文件进行缓存，这意味着当用户访问其他页面时，浏览器可以直接从缓存中加载 JavaScript 文件，而不需要重新下载，这可以大大提高网页的加载速度。
所以，最佳实践是将 JavaScript 代码放在单独的文件里，并通过 标签的 src 属性链接到 HTML 文件中。这样做可以提高代码的可维护性、可读性和可重用性，同时也能提高网页的加载速度。
如何处理
JavaScript 代码的加载顺序很重要，因为 JavaScript 代码可能会依赖于其他 JavaScript 代码或 HTML 元素。如果 JavaScript 代码在依赖的代码或 HTML 元素之前加载，可能会导致错误。
比如，你有一个 JavaScript 文件，它需要在页面加载完成后才能执行，否则可能会因为找不到 HTML 元素而报错。
解决这个问题，通常有几种方法：
将
标签放在标签的底部。 这是一个最简单的方法。当浏览器解析到标签的底部时，所有的 HTML 元素都已经加载完成，这时执行 JavaScript 代码就不会出现找不到 HTML 元素的问题了。-
使用
defer属性。defer属性告诉浏览器，这个 JavaScript 文件可以延迟加载，直到 HTML 文档解析完成之后再执行。这意味着浏览器会并行下载 JavaScript 文件，但会按照它们在 HTML 文档中出现的顺序执行。 -
使用
async属性。async属性告诉浏览器，这个 JavaScript 文件可以异步加载。这意味着浏览器会并行下载 JavaScript 文件，并且在下载完成后立即执行，而不会阻塞 HTML 文档的解析。但是，async属性不能保证 JavaScript 文件的执行顺序。 -
使用事件监听。 你可以使用
DOMContentLoaded事件来监听 HTML 文档的解析完成事件，然后在事件处理函数中执行 JavaScript 代码。document.addEventListener('DOMContentLoaded', function() { // 在这里执行 JavaScript 代码 });
选择哪种方法取决于你的具体需求。如果你的 JavaScript 代码依赖于其他 JavaScript 代码或 HTML 元素，那么应该使用 defer 属性或事件监听。如果你的 JavaScript 代码不依赖于其他 JavaScript 代码或 HTML 元素，那么可以使用 async 属性。
type 属性有什么作用？
标签的 type 属性用于指定脚本的类型。在 HTML4 中，type 属性是必需的，并且必须设置为 text/javascript。但在 HTML5 中，type 属性是可选的。如果省略 type 属性，浏览器会默认将其视为 text/javascript。
不过，如果你想使用其他类型的脚本，比如 TypeScript，那么你需要显式地指定 type 属性。
总而言之，虽然现在可以省略 type 属性，但为了保持代码的清晰性和可读性，建议还是显式地指定 type 属性。
