Script src 属性

基本用法

要在 HTML 文档中引入外部的 JavaScript 文件，可以使用以下的 script 标签：

<script src="path/to/your/script.js"></script>

在上面的例子中，src 属性指定了要加载的 JavaScript 文件的相对或绝对路径。当浏览器解析到这个 script 标签时，它会自动下载并执行这个指定的 JavaScript 文件。

异步加载

在一些情况下，我们希望在页面加载的同时异步加载 JavaScript 文件，以提高页面的性能和加载速度。这时可以通过设置 async 属性来实现：

<script src="path/to/your/script.js" async></script>

设置了 async 属性后，浏览器将在加载和执行这个 script 标签时不阻塞页面的渲染，而是在后台异步加载这个 JavaScript 文件。

延迟加载

除了异步加载外，还可以通过设置 defer 属性来实现延迟加载 JavaScript 文件的效果：

<script src="path/to/your/script.js" defer></script>

与 async 不同，defer 属性会保证这个 script 标签在页面解析完毕后再执行，即在 DOMContentLoaded 事件触发前执行，这样可以确保 JavaScript 文件在文档加载完成后再执行。

动态加载

有时候，我们需要在页面的某个事件发生后再加载 JavaScript 文件，这时可以通过 JavaScript 动态创建 script 标签来实现：

const script = document.createElement('script');
script.src = 'path/to/your/script.js';
document.body.appendChild(script);

通过上面的代码，我们可以在需要的时候动态地向页面中添加 script 标签，从而实现动态加载 JavaScript 文件的效果。

同源策略

需要注意的是，由于浏览器的同源策略限制，script 标签只能加载同源的 JavaScript 文件。如果要加载其他域下的 JavaScript 文件，需要使用 JSONP 或者 CORS 等跨域技术来实现。

总的来说，script 标签中的 src 属性是在 web 前端开发中非常常用的属性之一，通过合理使用它，我们可以更好地管理和加载 JavaScript 文件，提高页面性能和用户体验。