网站白屏不慌，按这个顺序排查

打开网站一片空白——没有报错页面、没有加载动画，就是纯粹的白。白屏是最让人心慌的前端故障，因为它把所有线索都藏起来了。但实际上白屏可以按五大类系统排查：网络层不通、静态资源加载失败、渲染层出错、接口异常、服务端返回异常。按网络→资源→渲染→接口→服务端的顺序走，十分钟内基本定位。

第一步：确认网络层通不通最基础也最容易跳过的一步：F12打开开发者工具的Network面板，刷新页面——请求发出了吗？收到响应了吗？状态码是什么？完全没有请求——DNS解析失败或网络断连，用ping和nslookup排查；请求发出但超时——服务器不可达，查防火墙和端口；收到502或504——后端挂了，跳到第五步。网络层排查的价值：确定问题在前端还是后端，决定后续排查方向。

第二步：静态资源加载成功了吗白屏最常见的原因：HTML加载了，但CSS和JavaScript没加载成功——页面有骨架但没有皮肤。排查：Network面板过滤JS和CSS文件——有没有红色失败请求？常见原因：CDN配置错误、HTTPS混合内容——HTTP资源在HTTPS页面被拦截、文件路径错误。修复：逐个确认失败资源的URL可以独立访问——不能访问就修路径或CDN，能访问就查安全策略配置。

第三步：渲染层有没有出错资源都加载了但页面还是白——问题出在渲染。排查：看Console面板——有没有红色JavaScript错误？常见错误：某个JS文件抛出异常导致整个渲染流程中断——白屏最常见直接原因；CSS兼容性问题——特定浏览器不支持的属性导致渲染失败。修复建议：在构建工具中配置对应浏览器的兼容目标；逐步注释法定位——把可疑的JS代码块逐个注释，找到导致白屏的那一段。

第四步：接口数据回来了吗现代前端页面严重依赖接口数据——接口挂了或返回格式错误，页面渲染条件不满足就白屏。排查：Network面板过滤XHR请求——接口返回了什么？状态码200但数据格式错误——前端拿不到预期数据就渲染不出；接口超时——后端慢查询导致；跨域被拦截——CORS配置缺失。修复：接口问题修后端，跨域问题修配置。

第五步：服务端返回了什么如果HTML本身就没正常返回——服务端渲染出错。排查：用curl直接访问页面URL——看原始HTML返回了什么；查看服务端错误日志。常见原因：PHP-FPM或后端进程崩溃——返回空的HTML；模板渲染出错；缓存层返回了空结果。修复：重启后端进程先恢复服务，再根据日志定位根因。

一张速查卡网络不通查DNS和连通性；资源失败查CDN和路径；渲染报错查Console和JS异常；接口异常查返回数据；服务端空白查进程和日志。五步按顺序走，不跳步不回头——白屏再慌，顺序对了就是十分钟的事。

预防白屏的三个习惯习惯一：前端错误监控——接入错误上报服务，JS异常实时推送到开发者，用户还没投诉你已经收到通知。习惯二：灰度发布——新版本先发布给小部分用户，确认无白屏再全量——大量白屏事故是「全量上线一个未充分测试的版本」直接导致。习惯三：降级方案——关键页面准备服务端渲染版本作为降级，前端JS挂了至少用户还能看到基础内容。三个习惯的成本都不高，但它们把白屏从「事故」降级为「告警」，从「用户发现」变成「开发先知」——这就是预防的价值。