共计 657 个字符，预计需要花费 2 分钟才能阅读完成。
记录一次排查 bug 的过程
业务部门反馈，用咱们的 h5 编辑器做进去的流动页，动画有点不晦涩，卡顿。
我电脑上失常，手机也失常，产品说他能复现，而后我去找测试借了个安卓手机，复现进去了。
搜“安卓 css3 animation 动画 卡顿 闪动”，我把搜寻后果前两页翻烂了，也没能找出什么黑魔法能做优化。比拟惯例的优化，之前都做过了。
而后想删掉一部分挂件，排除无关因素，以便定位到产生问题的起因。
卡顿的是金色字母“X”和金色边框图片。试着从上面往上一个一个删，按钮、输入框、输入框、输入框、图片，还是卡。
而后我不耐烦了，一次删了一大堆，不卡了。
懒得搞了，看看还有没有别的办法。
而后我想改一下动画的设置，看看不同的设置，能不能搭配出不卡的成果。
是这样的，改 duration 和 delay。
神奇，真的有成果。
原本是字母“X”和边框图片卡，我试着改了几个挂件的动画设置值，一会儿是按钮和输入框卡，一会儿是底部的图片卡，一会儿是两头的文字卡。
好家伙，把我给整不会了。
好无聊。
我去接了杯水，拿了点零食，两袋咪咪虾条和两袋辣条。
吃辣条的时候来了灵感，会不会是图片或者什么文件太大。
network 面板查看文件大小，都很失常，图片都在 100k 以内。
elements 面板，挨个挨个查看 img 标签。图是有点大，看到几张分辨率宽度 500px、700px 的图，理论显示在页面上是很小的图标，差不多用 100px 的就够了。
持续找，看到一个 4501*8000 的，太大了吧，预计就是它了。
截图做一张小图，替换掉之前的大图，刷新，不卡了。
事实证明多吃辣条能力调好 bug。
正文完
