一种chrome trace排查白屏问题的方法

问题发生在前不久。刚开发完的功能被测试人员发现了问题。如下图所示，在两个页面跳转过程中，会出现闪一下白屏的情况。于是我开始排查这个问题。

搭建排查环境与定位问题

由于前后两个页面都是移动端APP内的页面，因此使用chrome进行调试。

第一步，在手机上开启USB开发者模式。从APP中进入要调试的网页。

第二步，在电脑使用以下命令行运行chrome

/Applications/Google Chrome.app/Contents/MacOs/Google\ Chrome --enable-threaded-compositing --force-compositing-mode --enable-impl-side-painting --enable-skia-benchmarking --allow-webui-compositing

打开chrome://inspect，即可看到打开的网页，如下图所示。此处因为涉及公司信息，做了打码处理。

分别点击inspect和trace，进入trace调试窗口。在窗口中点击record按钮

第三步，回到inspect窗口，按照卡顿现象出现的路径，重新操作一遍页面，还原闪屏现场。

第四步，上述操作完成后回到trace窗口，点击Stop， chrome会自动将我们的操作每一帧的信息，以及变化的信息呈现出来，如下图所示：

第五步，分别点击每一帧，在下方的窗口处，找到白屏所在的一帧。

从trace图中可知，中会清晰显示各个线程执行的时间线。分别点击白屏左右的v8.run，发现如下图所示：

在白屏前，V8执行了html的解析， 白屏后开始执行record.chunk.js。

回到inspect中，分析record.chunk.js的内容。发现record.chunk.js正是负责react code的渲染，如下图所示：

至此，可以推断出在白屏出现在react code代码渲染之前。此时页面的渲染由当前的js和css，html决定。分析inspect network的加载顺序，如下图所示:

发现在record.chunk.js前record.css已经加载完成。这意味着record.chunk.js在加载执行前，可以在record.css处理中间过渡的白屏页面的效果。

解决问题

由以上分析可知，我们只需要在record.css处理过渡时间的页面效果，即可修复白屏问题。代码如下：

// record.css
html, body {
background-color: rgb(32,0,77);
}

修复后的效果如下图所示：

相关链接

• Chrome Trace Docs: https://www.chromium.org/developers/how-tos/trace-event-profiling-tool