在Web开发中，外部JavaScript（JS）文件的引用是提高页面性能和可维护性的关键。HTML5提供了多种方式来高效地引用外部JS文件，从而实现代码分离与优化。本文将详细介绍这些方法，并给出具体的实现步骤和示例。
1. 使用

1.2
defer
属性
defer
属性表示延迟执行外部JS文件。当
defer
属性被添加到

2. 使用

在这个例子中，
your-script.js
文件会被视为一个模块，并且可以通过
import
语句在其他模块中使用。
3. 使用CDN加速加载
使用内容分发网络（CDN）可以加速外部JS文件的加载。CDN会将文件存储在多个地理位置的服务器上，从而减少文件传输的距离和时间。

4. 优化加载顺序
为了提高页面性能，应该注意外部JS文件的加载顺序。通常，将依赖于其他库或脚本的脚本放在后面加载，这样可以确保依赖项已经可用。


5. 示例代码
以下是一个使用
async
和
defer
属性的示例：

欢迎来到我的网站

在这个示例中，
async-script.js
和
defer-script.js
将会异步和延迟加载，而不会阻塞HTML的解析。
总结
通过使用HTML5提供的特性，可以轻松实现外部JS文件的高效引用和优化。合理地使用
async
、
defer
、
module
属性，以及CDN和优化加载顺序，可以帮助提高页面性能和用户体验。