记录一个排查bug的过程业务部反馈，用我们h5编辑器制作的活动页面，动画有点不流畅，卡顿了。我的电脑正常，手机也正常。产品说可以复现，然后去测试借了个安卓手机，复现了。搜索“Androidcss3animation动画卡顿闪烁”，翻遍了搜索结果的前两页，也没有找到可以优化的黑魔法。之前做过比较常规的优化。然后我想删除一些挂件，排除不相关的因素，以便定位问题的原因。纸箱是一个金色的字母“X”和一个金框图片。尝试从下往上依次删除，按钮，输入框，输入框，输入框，图片，卡片。然后我就不耐烦了，一次删了很多，就不卡了。懒得动手了，看看有没有别的办法。然后我想更改动画设置，看看是否可以组合不同的设置来产生不卡顿的效果。出现这种情况，更改持续时间和延迟。太棒了，它真的有效。原来是字母“X”和相框画卡。我试图更改几个小部件的动画设置值。一会儿是按钮和输入框卡片，一会儿是底部的图片卡片，一会儿是中间的文字卡片。好家伙，你不能修理我。好无聊。我去拿了一杯水，一些零食，两袋咪咪虾条和两袋辣条。吃辣条的时候灵感来了。可能是图片或文件太大。网络面板查看文件大小，正常，图片都在100k以内。elements面板，一一查看img标签。图片有点大。看到了几张分辨率宽度为500px和700px的图片，但是页面上实际显示的是一个很小的图标，差不多100px就够了。继续搜索，看到一个4501*8000的，太大了，应该是吧。截图做小图，替换之前的大图，刷新，不再卡顿。事实证明，多吃辣条可以治病。我把修改后的方案链接和截图发给产品，他问我为什么图片太大动画会卡顿。我要给他一个交代，他也要给业务部一个交代。我想了想，说，计算机要用计算能力来显示图片，每一个像素点都需要计算。这个地方够用100px了，放一张4000像素的图片，40倍的计算能力，然后就卡住了。我认为这是有道理的，产品也有道理。后来觉得不对劲，又算了算，(4501*8000)/(300*120)=1000.22222是千倍之差。
