问题发生在前不久。刚开发完的功能被测试人员发现了问题。如下图所示，在两个页面跳转过程中，会出现闪一下白屏的情况。于是我开始排查这个问题。
搭建排查环境与定位问题
由于前后两个页面都是移动端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
热门跟贴