引入外部JS文件的作用
在编写网页时，我们有时需要通过JavaScript实现一些特殊功能，比如验证表单、轮播图、动画效果等。而这些JavaScript代码不仅需要在HTML文件中编写，还需要被引入到HTML文件中。在HTML文件中引入JavaScript文件可以使代码更加的模块化、易于维护。因此，在HTML中引入外部JS文件是非常必要的。
如何引入外部JS文件？
在HTML中引入外部JS文件非常简单，我们只需要在HTML文件中添加如下代码：
<script src="路径/文件名.js"></script>其中，src属性是用来指定JS文件的源地址，指向该文件的URI，也就是该文件相对于当前HTML文件的位置。
如何指定JS文件的源地址？
在引入JS文件时，我们有两种方式来指定JS文件的URI：
1. 绝对路径
绝对路径是指文件的完整路径，包含主机名、文件路径等信息。
例如，如果JS文件位于服务器的根目录下，可以写成：
<script src="http://www.example.com/js/myscript.js"></script>2. 相对路径
相对路径是指文件相对于当前HTML文件的路径。相对路径要比绝对路径简单易懂，且可以在离线环境下使用。
2.1 相对于当前目录
例如，如果JS文件和HTML文件在同一目录下，可以写成：
<script src="myscript.js"></script>如果JS文件在子目录下，可以写成：
<script src="js/myscript.js"></script>2.2 相对于根目录
如果JS文件位于服务器的根目录下，可以写成：
<script src="/js/myscript.js"></script>其中，"/"表示服务器的根目录。
2.3 相对于上级目录
如果JS文件位于上级目录中，可以写成：
<script src="../js/myscript.js"></script>其中，"../"表示上级目录。
除了通过<script>标签引入外部JS文件，还可以使用以下方法：
1. 使用jQuery库引入JS文件
我们可以使用jQuery库的ajax方法来引入JS文件。
$.ajax({
url: 'code.js', //文件路径
dataType: "script", //返回值类型，此处为“JavaScript脚本”
success: function(){
console.log("文件读取完毕！"); //回调函数
}
});
2. 使用import语句引入JS模块
在ES6中，我们可以使用import语句来引入JS模块。
import { myFunction } from './myModule.js'; //JS模块的路径
如果要使用default输出的内容，可以使用以下语句：
import myFunction from './myModule.js'; //JS模块的路径
注意事项
在引入JS文件时，我们需要注意以下几点：
1. 标签位置
通常情况下，我们将<script>标签放在HTML文件的</body>标签前。原因是由于JS代码的执行速度很快，如果脚本在HTML文档之前被执行，可能会导致页面加载速度变慢，用户体验变差。
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
<script src="路径/文件名.js"></script>
</body>
</html>
2. 语言属性
在HTML5中，如果<script>标签的type属性缺失，则默认为text/javascript。所以，通常情况下我们并不需要在<script>中添加type属性。但在以前的HTML版本中，这个属性是必须的。
但是为了避免后续版本的HTML规范变更，为了保证最好的兼容性，我们仍然建议在<script>标签中添加type属性：
<script type="text/javascript" src="路径/文件名.js"></script>3. 引入顺序
在引入多个JS文件时，我们需要注意文件间的引入顺序。如果某个文件依赖于其他JS文件的功能，则需要在HTML文件中先引入这些依赖JS文件，然后再引入本文件。
4. 外部JS文件的缓存
如果JS文件被引入以后，第一次访问非常慢，之后再访问就变得很快。这是因为浏览器会缓存JS文件，当浏览器访问相同JS文件时，会直接从缓存中读取。当我们更新JS文件时，用户访问的也是之前缓存的老版本，因此需要在文件名后添加时间戳或版本号，来保证浏览器每次都读取最新版本的JS文件。
<script src="路径/文件名.js?v=1.0"></script>以上代码中，"v=1.0"表示版本号。
总结
在HTML文件中引入外部JS文件是实现JavaScript代码模块化、易于维护的重要手段。我们在引入过程中需要注意URI的设定、标签位置、语言属性、引入顺序、缓存等多个方面的细节，这些细节对页面的性能和用户体验有着重要的影响。