问题发生在前不久。刚开发完的功能被测试人员发现了问题。如下图所示,在两个页面跳转过程中,会出现闪一下白屏的情况。于是我开始排查这个问题。
搭建排查环境与定位问题
由于前后两个页面都是移动端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
一个简单的用法。
相关链接
喜欢这篇文章的话,可以送我一杯冬天的奶茶吗?