页面白屏怎么排查处理

最近又出现白屏的情况，结合以往的经验，简单总结下，如果出现白屏怎么排查处理。

排查浏览器相关问题

1. 浏览器的缓存

有时候，浏览器会缓存错误的版本，导致页面白屏。可以使用无痕模式查看页面，也可以强制刷新，还可以清除缓存再查看，或者加版本号在后面

2. 浏览器的兼容性

换一个浏览器，看是否有浏览器的兼容性问题

3. 浏览器的插件

有部分浏览器的插件也会导致白屏问题。可以使用无痕模式查看页面排查。

排查JS/CSS相关问题

1. JS是否报错

打开浏览器控制台（Console），如果有JavaScript报错，可能就导致了页面白屏。 修复这些错误可能就可以解决问题。

2. 请求是否没有正常返回

如果页面的数据依赖于某个请求，而这个请求没有正确返回结果，也有可能导致白屏。 这个问题，通过控制台的Network选项卡进行排查。

3. CSS或JS资源是否无效

在Network选项卡里面查找，如果有CSS或JS资源404或者其他导致资源加载失败的情况，可能也会导致白屏

4. CSS/JS是否将元素隐藏了

查看元素，看CSS/JS是否将关键元素进行隐藏或者删除了

例子 - 企业微信里网页出现白屏

我最近是企业微信的网页应用出现白屏

1. 先去设置里清除缓存，发现部分机型好使，但也间接说明缓存的问题
2. 将链接复制出来，然后加上版本号v=x.x.x，发现好使了，就是缓存的问题

两种方案：

1. 在服务端控制资源的缓存时间，设置http响应头中的Cache-Control字段，可以设置为no-cache或者max-age=0，表示不进行缓存
2. 在资源链接后添加版本参数的方式，如?v=1.0.0，每次上线新版本时更改版本号，由于url不同，浏览器会自动去下载新的资源