静态HTML页面开发过程中，JS和CSS加载失败是高频出现的问题，很多新手遇到这类问题往往不知道从何下手，下面我们先看一张常见的错误场景示意图。
常见原因及排查步骤
1. 资源路径错误
路径错误是最常见的原因，首先要确认你引用的路径和实际文件存放位置是否匹配，静态HTML中引用资源通常使用相对路径或者绝对路径：
- 相对路径：以当前HTML文件所在位置为基准，比如HTML和CSS同目录，直接写
style.css即可；CSS在css文件夹下，需要写css/style.css - 绝对路径：以网站根目录为基准，比如
/static/css/style.css，需要确保根目录配置正确
可以通过浏览器开发者工具的Network面板查看资源请求状态，如果显示404，基本就是路径问题，你可以把鼠标悬停在请求的资源链接上，查看浏览器实际请求的地址是否正确。
2. 跨域访问限制
如果你直接双击打开本地HTML文件，浏览器会使用file://协议加载，此时如果JS或者CSS是引用其他域名的资源，就会触发跨域限制，导致加载失败。解决方法有两种：
- 使用本地服务器运行HTML文件，比如用VS Code的Live Server插件，或者Node.js的http-server工具，通过
http://协议访问页面 - 如果是引用第三方CDN资源，确认CDN是否支持跨域，或者更换支持跨域的资源地址
3. 文件语法错误
如果JS文件本身存在语法错误，或者CSS文件格式有问题，也可能导致加载失败或者加载后不生效。可以通过以下步骤排查：
- 打开浏览器开发者工具的Console面板，查看是否有JS语法错误提示
- 单独打开CSS或者JS文件的请求地址，看文件内容是否能正常显示，有没有乱码或者缺失内容
4. 缓存问题
浏览器缓存了旧版本的JS或者CSS文件，即使你修改了文件内容，浏览器还是加载旧版本，看起来就像加载失败一样。解决方法是在资源引用后面加版本号或者时间戳：
<!-- 加版本号解决缓存问题 --> <link rel="stylesheet" href="style.css?v=1.0"> <script src="main.js?v=1.0"></script> <!-- 或者加时间戳，每次请求都是新资源 --> <link rel="stylesheet" href="style.css?t=1680000000"> <script src="main.js?t=1680000000"></script>
快速排查流程
遇到加载失败时，可以按照下面的流程快速定位问题：
| 步骤 | 操作 | 可能结果 |
|---|---|---|
| 1 | 打开浏览器开发者工具Network面板，刷新页面 | 查看JS/CSS请求状态码，404为路径问题，403为权限/跨域问题，200但内容异常为文件问题 |
| 2 | 单独访问资源请求地址 | 能正常显示内容为路径/跨域问题，不能显示则为文件本身问题 |
| 3 | 清除浏览器缓存后重新加载 | 加载正常则为缓存问题，依旧失败则回到步骤1重新排查 |
代码示例：正确的资源引用方式
下面是一个静态HTML正确引用本地JS和CSS的示例，文件结构为：
- index.html（根目录）
- css/style.css（css文件夹下）
- js/main.js（js文件夹下）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静态页面示例</title>
<!-- 正确引用CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>静态HTML页面</h1>
<button id="btn">点击测试</button>
<!-- 正确引用JS，放在body底部避免阻塞渲染 -->
<script src="js/main.js"></script>
</body>
</html>对应的CSS文件内容示例：
/* css/style.css */
body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #333;
}
#btn {
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
}对应的JS文件内容示例：
// js/main.js
document.getElementById('btn').addEventListener('click', function() {
alert('JS加载成功，交互功能正常');
});如果按照上面的方法排查后还是无法解决问题，可以检查服务器的MIME类型配置，确保.css文件返回text/css类型，.js文件返回application/javascript类型，错误的MIME类型也可能导致浏览器拒绝加载资源。