线上项目白屏的原因

白屏的本质是渲染管线某一环断了——可能是资源、JS、接口、路由、样式、兼容性任一环节出问题。排查按"控制台 → 网络 → DOM → 环境"四步定位。

#本质（前端类比）

把网页想成一栋楼：

复制房子盖好了，里面有人，但他说不出话 = 数据没回来 → 白屏
房子盖好了，里面没人              = JS 没执行 → 白屏
房子没盖好                        = HTML 没加载 → 白屏
灯没开                            = CSS 缺失 → 白屏
人在家但出 bug 了 = JS 运行时错误 → 白屏

白屏 ≠ 一定是同一种原因——这是面试想听的层次。

#六大类原因（按出现频率）

#排查顺序（面试答题模板）

拿到白屏，按这个顺序查——从最快到最慢：

复制第 1 步 看控制台
 ├─ 有报错 → 解决报错即可（最高频）
 └─ 没报错 → 进入第 2 步

第 2 步 看 Network
 ├─ 入口 HTML/JS 红色 4xx/5xx → 资源问题
 ├─ 关键 CSS 红色 → 样式问题
 ├─ 接口全部 pending → 网络/后端问题
 └─ 全部 200 → 进入第 3 步

第 3 步 看 Elements/DOM
 ├─ #app 是空的 → JS 没执行
 ├─ #app 有内容但 0 高度 → CSS 问题
 └─ 有内容但没显示 → v-if/z-index 问题

 第 4 步 区分环境
 ├─ 只在某个浏览器版本 → 兼容性
 ├─ 只在某个网络 → 跨域/代理
 └─ 所有人都白屏 → 部署/构建

#高频坑（面试加分项）

1. JS 报错吞掉整棵树（React 类比）

React 组件里只要有一个 throw 没被 <ErrorBoundary> 接住，整个根组件就 unmount。Vue 同理（errorHandler 没注册）。线上最常见是某个非核心组件（统计、广告、某个弹窗）挂了，整个应用一起死。

2. 异步数据没回来就先 render

复制// ❌ 典型写法
const [user, setUser] = useState(null)
return <div>{user.name}</div>  // user 为 null 就白屏

// ✅ 应该有 loading/empty/error 三态
if (loading) return <Skeleton />
if (!user) return <Empty />
return <div>{user.name}</div>

3. SPA 部署路径错

线上最经典的坑：

• 前端路由是 /user/123，但 nginx 没配 try_files，刷新直接 404
• 部署到子路径（如 /admin/）但代码里写死了绝对路径 /static/xxx.js
• history 模式和 hash 模式配错

4. 接口报错没兜底

复制axios.get('/api/user')
  .then(res => this.setState({ user: res.data }))
// ❌ 没有 .catch，网络挂了一直转圈或白屏

5. 环境变量漏配

.env.production 没打包进 dist，process.env.API_BASE 是 undefined，接口请求 undefined/api/user → 404 → 白屏。

6. CDN / 字体阻塞

• 用了 Google Fonts，国内访问全挂，CSS 加载阻塞渲染
• <link> 里的 JS 报错，整页 HTML parse 停下来

#一句话答题版

白屏的本质是渲染管线某一环断了。从排查角度按"控制台 → 网络 → DOM → 环境"四步定位；从原因角度分资源加载、运行时错误、接口请求、渲染逻辑、样式问题、兼容性六大类。实战里最常见的是 JS 报错吞整棵树、异步数据没回就先 render、SPA 部署路径错 这三类。

#延伸阅读

• 前端性能优化_白屏-首屏加载：白屏时间指标计算
• SPA项目频繁上线导致白屏？最佳实践来了：SPA 部署缓存策略
• 一次低端机 WebView 白屏的兼容之路：兼容性专题
• vite+vue3实现低版本浏览器兼容的解决方案：构建工具兼容方案