vue项目中视频播放结束返回首页出现1秒左右的白屏问题

vue项目的性能优化问题，一直以来都是大家比较关注的。

近日负责的项目中，使用了SignalR实时通讯，客户端中点击发起播放视频的请求到服务器，服务器接到请求后再调用前端的播放视频方法，以此来达到播放视频的功能，也可以通过服务器进行广播，以此让另一个客户端可以与之联动，从而达到多个客户端同一时刻由其中一端发起请求，却达到所有客户端同时播放、同时结束的视频联动广播功能。实时通信的功能没话说，反应速度非常快，却恰恰在播放完视频，返回首页的时候出现了约1秒时间的白屏问题！这用户体验感一下子拉低了太多太多！

纠结之余，开始排查问题所在！

首先，联动视频只有在首页跳到视频播放页面返回时才出现这样的问题，而在其它二级或者三级页面可以迅速返回，迅速显示页面内容，问题预计出现在首页！

其次，关于vue项目首屏加载出现白屏的问题是比较常见的，也是大家比较头疼的问题，优化方面也是从路由懒加载，keepAlive, 压缩图片，减少http请求次数，使用nuxt框架等来考虑。但是当下项目的问题并不是首屏加载慢，出现白屏的问题，而是点击返回首页的时候才出现，以此可以断定并不是首屏加载的问题！

最后，与老同学聊了一会，和我说会不会是因为首页频繁操作了dom，引起了回流、重绘！我一开始质疑了同学，因为vue项目我基本不操作dom，而且首页只有一些图片和按钮，并不复杂，也没有操作dom的必要！然后他又说检查一下动画是否已经脱标，如果没有，重绘的话，也可能会引起类似的情况！

于是乎，我从动画开始检查，发现自己之前使用了别人写的水波纹动画特效，在此处，我确确实实操作了dom，注释这些代码，和动画css之后，打包看效果，确实不再白屏了！为了保住这个动画效果又继续做了一些列的修改，终于在不需要操作dom的情况下动画正常显示在页面上，同时也解决了这一白屏bug！

不曾想自己会在方面出现问题，因为动画本来就是定位脱标了的！以后使用别人的东西，还是要仔细一些！哈哈!

关于回流与重绘可以参考下面的网址：讲得非常清晰！

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/24