在文档中加载外部脚本和样式表(在文档中加载文件)

HTML 提供了两种在文档中加载外部文件的方法： 外部脚本和外部样式表。

外部脚本

外部脚本用于包含 JavaScript 代码，该代码在文档加载时执行。要加载外部脚本，请使用

<script>

标签，并指定

src

属性，指向 JavaScript 文件的 URL：


<script src="scripts.js"></script>


外部脚本可以提升页面性能，因为它可以将脚本代码从 HTML 文档中分离出来，从而减小页面大小。外部脚本可以被多个页面重复使用，避免了代码重复。

外部样式表

外部样式表用于包含 CSS 代码，该代码定义了文档的视觉样式。要加载外部样式表，请使用

<link>

标签，并指定

href

属性，指向 CSS 文件的 URL：


<link rel="stylesheet" href="styles.css">


外部样式表也有助于页面性能，因为它可以将样式代码从 HTML 文档中分离出来，从而减小页面大小。外部样式表可以被多个页面重复使用，避免了样式重复。

加载顺序

外部文件在文档中的加载顺序很重要。脚本通常在加载文档的主体部分之前加载，而样式表通常在加载文档的其余部分之前加载。

这是因为脚本通常需要在页面的内容可用之前执行，而样式表只需应用于页面的视觉呈现即可。但是，可以根据需要调整加载顺序。例如，如果脚本依赖于样式表中定义的类或 ID，则可以将样式表放在脚本之前加载。

最佳实践

使用文件扩展名： 确保外部文件具有适当的文件扩展名（例如，.js 对于脚本，.css 对于样式表）。这有助于浏览器正确识别和处理文件类型。使用相对路径： 如果可能，请使用相对路径引用外部文件。这有助于确保文件在移动或重命名时仍然保持可用。考虑缓存： 如果外部文件不会经常更改，请设置适当的缓存标头，以防止浏览器重复下载文件。使用外部文件管理器： 使用构建工具或库来管理外部文件，例如 webpack 或 Grunt。这有助于自动化文件加载过程并确保文件被正确优化。

结论

在文档中加载外部脚本和样式表是一种强大的技术，可以改善页面性能、代码可重用性和维护性。 通过遵循最佳实践并根据需要调整加载顺序，您可以创建高效且易于维护的 Web 页面。