在构建网页时，JavaScript是一种常用的脚本语言，它能够增强网页的交互性和动态效果。将JavaScript代码集成到HTML文档中，可以通过多种方式实现。其中，引入外部JS文件是一种常见且推荐的做法，因为它有助于代码的复用、维护和优化加载时间。以下是详细介绍如何在HTML文档中引入JavaScript文件的方法。
1. 使用<script>标签
在HTML文档中，<script>标签用于在页面中嵌入或引用JavaScript代码。要引入外部JS文件，需要在<script>标签中设置src属性，该属性值指向JavaScript文件的路径。
1.1 在<head>部分引入
将<script>标签放置在<head>部分，可以让JavaScript文件在页面加载时先于页面内容执行。这种方式适用于需要先加载JavaScript文件，再显示页面内容的场景。
<head>
<script src="path/to/your/script.js"></script>
</head>
1.2 在<body>部分引入
将<script>标签放置在<body>部分，可以让JavaScript文件在页面内容加载完成后执行。这种方式适用于需要依赖于页面内容的JavaScript代码。
<body>
<script src="path/to/your/script.js"></script>
</body>
2. type属性
虽然type属性在HTML5中已经不被推荐使用，但在某些情况下，设置type属性可以帮助浏览器正确识别JavaScript代码的类型。以下是两种常见的type属性值：
text/javascript：这是最常用的类型，表示JavaScript代码。application/ecmascript：另一种表示JavaScript代码的类型。
<script src="path/to/your/script.js" type="text/javascript"></script>
3. 异步加载（Async）
如果JavaScript文件不需要依赖于页面内容，可以使用async属性来异步加载该文件。这意味着浏览器会在下载JavaScript文件的同时继续解析HTML文档，从而提高页面加载速度。
<script src="path/to/your/script.js" async></script>
4. 异步加载（Defer）
如果JavaScript文件需要在页面内容加载完成后执行，可以使用defer属性。与async属性类似，defer属性也会异步加载JavaScript文件，但它的特点是文件会在整个页面解析完成后执行。
<script src="path/to/your/script.js" defer></script>
5. 总结
通过在HTML文档中引入外部JavaScript文件，可以有效地提高页面性能和代码复用性。在实际应用中，可以根据需求选择合适的引入方式，以达到最佳效果。