页面白屏，网站控制台一排红字，控件Network面板里某个JS文件的加载状态是 pending——这种事我上周又碰上一回。甲方催着上线，不出测试环境一切正常，网站生产环境就是控件加载不出来。折腾两小时，加载最后发现是不出CDN节点缓存了一个404的空文件。你说气不气人。网站

控件加载失败，控件表象看着都差不多，加载根因能差出十万八千里。不出浏览器请求一个资源，网站从DNS解析到TCP握手，控件再到服务器响应、加载浏览器解析执行，中间任何一环卡住，用户看到的就是转圈或者空白。大多数人第一反应是“网速慢”，但网速慢顶多让你等几秒，不会让你永远等下去。

先看控制台，别瞎猜

F12打开DevTools，Console和Network两个面板基本能定位八成问题。Console里如果报 net::ERR_ABORTED 或者 404，路径写错了或者文件被删了，这种最好查。如果是 CORS policy 开头的一长串，那就是跨域配置的问题，跟控件本身没关系，是服务器没给够权限。

Network面板更直观。看那个失败请求的Status Code：304 是缓存协商出了问题，502 是网关挂了，timeout 就得查网络链路。有一回我碰到所有静态资源都返回 200 但内容长度为0，查了半天，是Nginx的gzip模块配置冲突，压缩后的响应体被截断了。这种问题你光看状态码根本看不出来，得点开Response看实际内容。

路径和依赖，老生常谈但总有人栽

相对路径和绝对路径混用是重灾区。本地开发用 ./js/vendor.js 没问题，部署到子目录下就全挂了。还有人用Webpack打包，publicPath没配对，生成的index.html里引用的全是根路径，放到 /app/ 下面直接全军覆没。

依赖顺序也会坑人。jQuery插件写在jQuery本身之前加载，浏览器报 $ is not defined，看着像jQuery没加载，其实是加载顺序反了。异步加载的脚本更麻烦，async 和 defer 用错了，执行时机完全不可控。我见过一个页面，统计代码用了async，结果它先于主框架执行，把全局变量覆盖了，后面所有控件初始化全报错。

缓存这东西，成也萧何败也萧何

浏览器缓存、CDN缓存、Service Worker缓存，三层叠在一起，出问题的时候能让你怀疑人生。明明文件更新了，用户那边还是旧版本。强刷能解决，但你不可能让每个用户都按Ctrl+F5。

版本号或者文件hash是正解。main.js?v=20240521 这种query string方式，有些CDN不认，得用 main.a3f2c1.js 这种文件名hash。Service Worker更狠，它拦截所有请求，一旦注册成功，就算你服务器上的文件删了，它还能从缓存里给你翻出来。调试的时候记得在Application面板里Unregister掉。

服务器端的事，前端有时候真管不了

MIME类型配错，浏览器拒绝执行。.js 文件返回 text/plain，Chrome直接报 Refused to execute script。还有跨域隔离策略，Cross-Origin-Resource-Policy 设置成 same-origin，别的域想引用你的字体文件或者图片，门都没有。

HTTP/2推送用不好也会出问题。服务器推了一个资源，浏览器缓存里已经有了，两边冲突，反而导致加载失败。这种案例少，但碰上了查起来极其痛苦。

我的习惯是：先复现，再缩小范围。换个浏览器、换个网络、用无痕模式，一步步排除。实在不行，抓包看原始请求和响应，比在代码里瞎找快得多。控件加载不出来，九成不是控件本身的问题，是它周围的环境出了岔子。

(责任编辑：百科)