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

记录一次排查bug的过程

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

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

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

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

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

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

把改好的链接和解决办法截图发给产品，他问我，为什么图大，动画就会卡。我要给他一个解释，他也要给业务部门一个解释。我想了一下，说，计算机把图片显示出来，是要用算力的，每个像素都要计算，这个地方用100px的就够了，放个4000像素的图，40倍的算力，那可不就卡了吗。我觉得很有道理，产品也觉得有道理。后来感觉有点不对，又算了一下，(4501*8000)/(300*120)=1000.22222是一千倍的区别。