前端白屏问题_记一次白屏统计与修理

记一次白屏统计与修复

博文原地址

白屏来源

上一版部门用的前端结构是python || lua渲染的html页面 + seajs + js模板 + less，但是这种情况发现对应不懂服务端渲染页面，或者服务端人员来说，在配合上存在工作不明，比如渲染的html应该由谁来维护，毕竟渲染的页面还是需要从服务端取数据的，以及在互相配合的过程中存在知识差异效率低的情况。

所以我们重构了，改成 backbone + modjs + js模板 + less, 打包模块也由grunt改成fis了。

白屏现象

重构了两个月，终于要上线了，好激动啊

...

白屏访问不了...白屏访问不了...白屏访问不了...

我去，我都没有重现啊

白屏定位与数量统计

既然出现了反馈，那肯定就是有问题了，但是本机又没有重现，该如何定位呢？

首先，还是要确定下白屏的数量占比。

统计方式，就是监听某个主DIV的变化(因为是单页面的应用，所以总会有个入口DIV来监听)，白屏即是该div没有在规定时间内被放入东西，所以只要在规定时间内该DIV没有变化，那就可以进行白屏统计了。

最后统计上来，发现白屏占比在6%左右，数量还是蛮大的。

(如果说还需要统计网速之类的，因为我们的主程序js是通过async挂上去的，也可以在规定时间内检测加载到哪个script了，由此来确定程序的加载情况如何)

(如果说还需要统计API的调用情况的，比如是否timeout了