做站时间久了,白屏这个问题多多少少都会碰到。用户点进来页面一片空白,刷新一下有时候又能正常出来,没有明显报错提示,这种断断续续的问题最磨人。不光影响访客体验,对收录也不太友好,之前我手上几个站点都踩过这个坑,慢慢摸出来一套排查思路,随手记下来。
先分清两种不一样的空白情况,找方向的时候不容易走偏。
- 标签栏一直转圈,页面迟迟输出不出内容,这种大多是后端、网络、DNS或者服务链路出问题;
- 页面很快加载完成,转圈停止,但是肉眼看是空白,F12里面能抓到html结构,一般是前端渲染卡住了。
平时遇到比较多的几种原因
后端程序和服务器层面
用宝塔自建站点的,这块问题出现频率很高。PHP版本不对是很常见的情况,主题或者插件适配旧版本,切换高版本PHP之后代码直接中断,返回空页面。
数据库连接出错也会直接白屏。配置文件里面账号密码、地址填错,或者mysql服务挂掉,程序读取不到数据,就停止输出页面内容。还有目录权限没调好,缓存文件夹、上传目录缺少读写权限,走到缓存逻辑直接卡死。
服务器内存吃满的时候,php-fpm进程会被系统杀掉,访问的时候就返回空白。这种问题经常是间歇性的,低访问量的时候看不出异常,流量上来才暴露。
遇到这类情况,直接去看站点错误日志、php报错日志,日志里面一般会写清楚哪里出问题。
静态资源加载异常
很多模板里面会引用外部CDN的js、css、字体文件。一旦对方的资源地址失效、解析不稳,页面渲染就被卡住。
不少人复制网上模板的时候没留意,直接带上外部资源链接,当时测试正常,过段时间源站失效,自己很难第一时间想到这里。脚本写在头部又没加异步,一旦报错,后面所有渲染流程都会停掉。
CDN缓存和防护带来的白屏
上了CDN之后,故障会变得很奇怪,有的地区正常,有的地区打开空白。很多时候是出错的空白页面被缓存到节点上,访客拿到缓存内容就一直空白。
WAF的规则误拦截也会这样,拦截之后没有返回提示页面,直接返回空白。改完代码之后如果只刷新页面,没清节点缓存,旧的出错版本会一直留在上面。
前端渲染的问题
单页程序或者重度依赖JS渲染的主题,很容易出现这类情况。HTML只输出一个根节点,所有内容靠接口拉取。接口请求失败、跨域拦截、JS语法报错,都会导致页面渲染不出来。
证书、域名解析和防盗链
SSL证书配置不对、过期,部分浏览器加载资源的时候直接阻断。还有DNS解析不稳定,部分地区解析失败,静态资源加载不出来。防盗链设置太严,资源域名和主域名不匹配,也会被拦截。
我自己排查的顺序,由简到繁,省很多时间
先换网络测试,拿手机流量打开看看。手机流量正常,基本就是本地宽带或者DNS的问题,不用折腾服务器。
打开F12看控制台,红色报错就是突破口,看是资源404、跨域还是证书报错。再切到网络面板,看主文档的状态码。200说明后端正常返回页面;500、502、504就是服务端故障;403大多是权限或者拦截。
能绕过CDN就直接用服务器IP访问。IP访问正常,说明源站本身没问题,问题出在CDN缓存、防护策略这边。IP打开也是空白,就去源站查日志。
WordPress、Typecho这类程序,插件冲突是常客。可以临时逐个禁用插件,或者切换默认主题,快速定位是不是插件、主题代码的问题。
日常维护可以做的优化,减少白屏出现
关键样式可以内联,保证页面基础结构先渲染出来。非必要JS加上defer或者async,避免脚本阻塞页面解析,头部不要堆太多第三方脚本。
前端写一点兜底逻辑,接口请求失败、渲染异常的时候,给访客一个简单提示,不要直接一片空白。用户至少知道是临时加载异常,不至于直接关掉页面。
CDN这边,HTML页面不要设置太长缓存,不然空白页面会被节点缓存很久。改代码之后针对性刷新缓存,不要动不动全节点刷新。上新WAF规则,先小范围观察一段时间,避免误拦正常页面。
平时多留意服务器负载,磁盘、内存占用定时看一看。磁盘写满、内存跑满,是很多站点不定时白屏的根源。日志、缓存文件定期清理,php-fpm进程数量配置合理,避免溢出。数据库连接数也不要长期跑满。
更新主题、插件、前端代码之前,记得备份。更新完多换几个节点测试,一旦出问题,可以快速回滚到上一个可用版本。我这边大部分白屏故障,都是更新操作之后才出现的。
还有几个容易忽略的小点
很多时候只在电脑上测试,忽略移动端。有些代码在桌面浏览器跑没问题,移动端内核兼容差,脚本执行失败,就会出现电脑正常、手机打开空白的情况。
并发上来之后才触发的白屏最难排查。低访问的时候一切正常,流量一涨,资源不够用,部分用户拿到空白响应,这种就要盯着负载日志慢慢观察。
白屏说到底只是一个现象,不是单独的故障。原因跨度很大,一行JS写错、缓存策略没调好、服务器资源不够,都有可能。平时养成先看状态码、隔离CDN、翻看日志的习惯,大部分问题都能快速定位。提前做好备份、资源本地化、异常兜底,能降低这类故障对站点的影响。
















![表情[baoquan]-环球云域CloudIDC](https://cloudidc.vip/wp-content/themes/zibll/img/smilies/baoquan.gif)


暂无评论内容