最近给客户部署的一个项目,客户反馈说持续运行一段时间后浏览器会崩溃,如下图。
收到反馈后,我们使用自己的设备进行测试,持续运行了48小时,页面并没有崩溃。后来找到几台老旧机型来测试,运行几小时后确实出现了崩溃的现象。排查原因应该是代码运行中,在某些低端设备上内存释放不及时,长时间运行后内存积累,导致页面崩溃。
在不能强制客户升级硬件设备的条件下,只能通过优化代码,排查可能存在内存泄漏地方。
1、页面中有很多通过svg和Lottie实现的动画,并通过v-show来控制不同动画的显示和隐藏。通过调试发现,在v-show值为false,即动画display:none的情况下,动画依然在占用内存,所以在优化时将v-show改为了v-if。
2、页面中的动画多处使用了setInterval定时器,通过封装公共方法,使用requestAnimationFrame和setTimeout代替setInterval。
3、对于一些简单功能,如显示当前时间,去掉插件,通过原生js实现。
优化过后,在大部分之前崩溃过的电脑上没有崩溃现象了,剩下的电脑崩溃频率明显降低。