一种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按钮

选择 Frame Viewer项，点击右下角Record按钮，开始记录。

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AX3Urwii-1607290499086)(https://s3.ax1x.com/2020/12/07/DvCaLQ.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-01AHrNUK-1607290499087)(https://s3.ax1x.com/2020/12/07/DvVW3n.jpg)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2LNRY6Ny-1607290499089)(https://s3.ax1x.com/2020/12/07/DvVfcq.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nyijZlJy-1607290499090)(https://s3.ax1x.com/2020/12/07/DvVhj0.jpg)]

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

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

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

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

解决问题

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

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

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

总结

本文的目的不是介绍react白屏问题的解决，而是抛砖引玉，介绍chrome trace一个简单的用法。

相关链接

• Chrome Trace Docs

喜欢这篇文章的话，可以送我一杯冬天的奶茶吗？