浏览器加载 css/js 常见四大静默问题:路径错误致 404、脚本执行时机不当、缓存导致旧代码生效、import map 未正确配置或兼容性不足。

link 标签引入 CSS 时路径写错,浏览器不报错但样式不生效
浏览器加载 link 时遇到 404 路径错误,默认静默失败——没提示、没警告,只在开发者工具的 Network 面板里显示 css 请求状态是 404。常见原因是相对路径算错了当前 HTML 文件的位置。
- 用
<link rel="stylesheet" href="style.css">时,style.css必须和 HTML 文件在同一目录;如果 CSS 在css/子目录,得写css/style.css - 避免用
../往上跳太多层,容易在不同部署环境(本地 vs 服务器)下失效;推荐用以站点根目录为起点的绝对路径:/css/style.css - 检查浏览器地址栏 URL:如果访问的是
file:///xxx/index.html,部分浏览器会禁用相对路径加载 CSS/JS(出于安全限制),此时必须起一个本地服务(如npx serve)才能正常测试
script 标签放在 head 里,执行时报 document.getElementById 返回 null
HTML 是从上到下解析的。script 放在 里,代码运行时 DOM 还没开始解析,自然找不到元素。这不是语法错误,是执行时机问题。
- 最直接的解法:把
<script src="main.js"></script>移到前面 - 如果必须放
,加defer属性:<script src="main.js" defer></script>,它会等 HTML 解析完再执行(且保证顺序) -
async也放,但它不保证执行顺序,适合独立、无依赖的脚本(比如统计代码),别用它加载操作 DOM 的逻辑
CSS 和 JS 文件修改后,页面还是旧效果
这是缓存导致的,浏览器默认复用已缓存的 .css 和 .js,哪怕你本地文件已经改了。
- 开发阶段最快捷的办法:打开开发者工具 → Network → 勾选
Disable cache(刷新时生效) - 上线前,用构建工具自动加哈希后缀,比如把
index.js输出成index.abc123.js,这样 URL 变了,缓存就自然失效 - 临时调试也可手动加查询参数:
style.css?v=2或main.js?t=1715823490,但别提交到生产环境——参数没意义,还可能干扰 CDN 缓存策略
用 import map 加载 ES 模块,但 Chrome 报 Failed to resolve module specifier
import map 是现代浏览器支持的模块映射方案,但它只对 type="module" 的 <script></script> 生效,且必须放在所有模块脚本之前。
立即学习“前端免费学习笔记(深入)”;
- 确保 HTML 中有:
<script type="importmap">{ "imports": { "lodash": "https://cdn.skypack.dev/lodash@4.17.21" } }</script> - 对应 JS 必须是模块格式:
<script type="module">import _ from 'lodash';</script>;普通<script></script>无法使用import map - 注意兼容性:
import map在 Safari 16.4+、Chrome 115+ 才稳定支持,老版本或微信内置浏览器基本不认,别在兼容要求高的项目里当主力方案










