一、问题描述
在使用webp格式动图作为背景图片时，下层有svg地图，在操作地图之后，做弹窗类操作，会导致背景动图屏闪，总结就是在背景是动图且与svg同时使用时，一旦背景所在图层或所在图层之后有更新，就会导致屏闪
二、问题定位
在出现这个问题之后，反复去查找，依然不知道出现这个问题的原因是啥。于是开始一个图层一个图层去排查，然后发现在删除了svg地图图层之后，问题就解决了，于是猜测问题是渲染内存过大，导致频闪
三、尝试方案
- 刚开始就尝试换图片格式，尝试换成相对小的GIF格式，结果动图效果不佳，频闪有所改善，但是此方案不可行，排除
- 在使用GIF格式之后，发现频闪有所改善就基本确定是由于渲染内容太多，体积太大，产生内存分配问题导致频闪，于是尝试了基本所有格式的动图，发现结果都不佳，然后开始查各种资料去优化渲染性能（主要是css部分）
- 关键点：在一篇文章上看到说少用背景图片，可以使用image代替，可以优化，于是带着试一试的想法开始尝试，这就陷入另一个问题，怎么让图片在内容的上层，且不遮挡内容部分（需要ui支持，把有动效部分单独抽出做成动图，有遮挡部分做成静态图），然后会遮挡部分做背景图片，动图部分使用image引入，在上层，有个关键点是一个CSS属性，
pointer-events,值设置为none，简单理解就是所有事件穿透此元素，具体细节可以去MDN看看，实现之后，效果提升明显，但是在频繁滑动地图时依然会闪动 - 于是还得再次缩小动图的大小，需要ui把只把动效的部分做出来，其他部分一点不要，再次实现，OK，问题解决
四、问题总结
这个问题出现的概率不多，主要是难在问题定位，而且几乎在网上找不到有相同的问题，只能靠自己一点一点去排查，确定问题方向之后去想解决办法，下面就总结一下问题
- 如果项目周期赶，有问题，网上现有解决方案就直接用，不纠结，赶完项目再找原因
- 如果时间比较充裕，可以试着去查找问题，重点是问题方向，如果是想这样的不报错的奇怪问题，而且是必现的话，大概率就是渲染内存问题，方向就是减小渲染内容的大小
- 结论就是一定要自己多尝试，慢慢就能确定问题方向，对自己知识面上面个不错的提升
