页面白屏的判断

当网站访问时突然白屏，排查可以按照从表面到深层、从简单到复杂的顺序进行，以下是具体的排查步骤和思路：

确认是否为局部问题
- 检查其他设备/浏览器是否能正常访问：排除本地设备或浏览器的个体问题（如网络缓存、浏览器故障）。
- 检查同网络下其他网站是否正常：排除网络连接故障（如WiFi断连、DNS解析失败）。
- 尝试刷新页面（Ctrl+Shift+R 强制刷新）：排除浏览器缓存导致的资源加载异常。
查看页面状态提示
- 浏览器地址栏是否显示“无法访问此网站”“连接超时”等提示：可能是服务器宕机、域名解析失败或网络拦截（如防火墙）。
- 若地址栏显示正常域名但页面空白：大概率是前端代码执行错误或资源加载失败。

按 F12 或 Ctrl+Shift+I 打开开发者工具，重点关注以下面板：

白屏最常见的原因是 JavaScript 运行时错误，控制台会直接显示错误信息：

常见错误类型：
- Uncaught ReferenceError：变量/函数未定义（如依赖未加载、拼写错误）。
- Uncaught TypeError：类型错误（如调用null/undefined的方法）。
- Uncaught SyntaxError：代码语法错误（如括号不匹配、ES6语法未转译导致低版本浏览器报错）。
- CORS 错误：跨域请求被拦截，导致数据无法获取，页面因缺少数据而白屏。
排查逻辑：根据错误信息定位具体文件和行号，检查对应代码是否存在逻辑问题或依赖缺失。

若代码无错误，但页面空白，可能是关键资源（HTML/CSS/JS/接口数据）加载失败：

筛选 Failed 或 4xx/5xx 状态的请求：
- HTML/CSS/JS 文件加载失败（如404 Not Found）：可能是打包路径错误、静态资源服务器故障或CDN失效。
- 接口请求失败（如500 Internal Server Error）：后端服务异常，导致页面因无数据而无法渲染。
检查资源加载顺序：若依赖的库（如Vue、React）未加载成功，后续业务代码会因找不到全局变量而报错白屏。

查看 <body> 内部是否有内容：若DOM结构为空，可能是框架渲染失败（如Vue的app.mount()未执行、React的ReactDOM.render() 出错）。
检查是否有样式导致页面隐藏：如 body { display: none; } 或 opacity: 0（可能是样式冲突或动态样式逻辑错误）。

若页面依赖 localStorage/sessionStorage 或Cookie中的数据，可检查对应存储是否存在异常值（如数据格式错误、值为空），导致代码执行时崩溃。
清除浏览器缓存（Application -> Clear storage）：排除缓存的旧资源与新代码冲突的问题。

如果项目基于Vue、React等框架，需结合框架特性检查：

Vue 项目：
- 检查是否因 响应式数据未更新 导致页面未渲染（如直接修改数组索引未触发更新）。
- 查看是否有 路由拦截逻辑错误（如全局路由守卫中next()未调用，导致路由无法跳转）。
React 项目：
- 检查 组件渲染是否返回null 或因 setState 调用时机错误导致的渲染异常。
- 查看是否因 Hooks使用违规（如条件判断中调用useState）导致组件崩溃。
SSR 项目（如Next.js、Nuxt.js）：
- 区分是服务端渲染失败（HTML输出为空）还是客户端 hydration 错误（控制台会提示Hydration failed）。

若前端资源和代码无明显错误，需排查后端和环境问题：

服务器状态：
- 检查服务器是否正常运行（如通过ping命令或服务器监控工具）。
- 查看服务器日志（如Nginx/Apache日志），是否有请求超时、内存溢出等错误。
打包构建问题：
- 若白屏仅出现在生产环境，可能是打包过程中出现异常（如Tree-shaking误删关键代码、环境变量配置错误）。
- 对比开发环境与生产环境的打包产物，检查是否有资源路径、依赖引入的差异。
第三方依赖冲突：
- 若近期更新过依赖，可能是新版本依赖存在bug或与其他库不兼容，可尝试回退到之前的依赖版本排查。

通过逐步缩小范围，通常能定位到白屏的根本原因（如代码错误、资源缺失、服务器故障等）。

页面白屏的判断 ​