安卓css动画卡顿-原因：图片分辨率太大了

记录一次排查bug的过程

业务部门反馈，用我们的h5编辑器做出来的活动页，动画有点不流畅，卡顿。

我电脑上正常，手机也正常，产品说他能复现，然后我去找测试借了个安卓手机，复现出来了。

搜“安卓 css3 animation 动画 卡顿 闪烁”，我把搜索结果前两页翻烂了，也没能找出什么黑魔法能做优化。比较常规的优化，之前都做过了。

然后想删掉一部分挂件，排除无关因素，以便定位到产生问题的原因。
卡顿的是金色字母“X”和金色边框图片。试着从下面往上一个一个删，按钮、输入框、输入框、输入框、图片，还是卡。
然后我不耐烦了，一次删了一大堆，不卡了。
懒得搞了，看看还有没有别的方法。

然后我想改一下动画的设置，看看不同的设置，能不能搭配出不卡的效果。

是这样的，改duration和delay。
神奇，真的有效果。
本来是字母“X”和边框图片卡，我试着改了几个挂件的动画设置值，一会儿是按钮和输入框卡，一会儿是底部的图片卡，一会儿是中间的文字卡。
好家伙，把我给整不会了。

好无聊。
我去接了杯水，拿了点零食，两袋咪咪虾条和两袋辣条。
吃辣条的时候来了灵感，会不会是图片或者什么文件太大。
network面板查看文件大小，都很正常，图片都在100k以内。
elements面板，挨个挨个检查img标签。图是有点大，看到几张分辨率宽度500px、700px的图，实际显示在页面上是很小的图标，差不多用100px的就够了。
继续找，看到一个4501*8000的，太大了吧，估计就是它了。
截图做一张小图，替换掉之前的大图，刷新，不卡了。
事实证明多吃辣条才能调好bug。