H5送鲜花、礼物动画(解决：多个动画同时渲染卡顿问题)

前言：

     由于项目需要，要做一个送礼物的动画，而在项目开发过程中碰到了一些坑，现在记录下来难免以后再次跳坑。如有不足之处还请多多指教。

使用场景：

       四个人斗地主，当你觉得哪个人打得好就可以送他一束鲜花，打行不好你可以向他扔鸡蛋，礼物分别是： 鲜花、平锅，点赞，砸蛋共有4种，这4种礼物的动画是用GIF图片做（可以用Canvas做）的，当前送礼物的人少的时候还好，但是在人多高并发的情下（如在同一秒钟有1000个人送各种相同或不相同的礼物给同一个人或不是同一个人的情况）由于有4个人，每个人有4种动画那加起来就会有16次dom渲染的情况，送礼过程是通过用户在微信（是一个专门用于送礼物的小程序），后端是用WebSocket推过来的数据，这里显示动画的是一个大屏输出端。

问题：

      之前是用img标签通过修改img标签的src属性来达到显示、切换礼物的动画的效果，在高并发下时会出现卡顿、不动、假死等现象，有时还无法正常显示图片，最后导致页面崩溃。

解决：

     后来用普通标签如 i标签 并修改 标签的css background-image背景来达到切换gif动画图片的效果，效果很好，没有出现上面的情况。

原因：

     个人认为：使用img标签，img标签本身有一个loading的过程，所以比起在普通标签元素上改背景图要耗费性能得多。

注意：

      在切换不同图片动画时一定要在图片地址?后面加上一个不重复的后缀（因为切换图片时浏览器和原来图片的地址一样的话就不会切换而导致第二次没有动画效果的情况）。

原效果图：

 

压力测试代码：

    
    
    
    
    



    

        

            

            

            

            

            1
        
        

            

            

            

            

            2
        
        

            

            

            

            

            3
        
        

            

            

            

            

            4
        
    

    

        

            
            
            
            
            
        
        

             鲜 花 
             平 锅 
             点 赞 
             砸 蛋 
             压 测 
        
    

压力测试界面：