乐趣区

关于前端:安卓css动画卡顿原因图片分辨率太大了

记录一次排查 bug 的过程

业务部门反馈,用咱们的 h5 编辑器做进去的流动页,动画有点不晦涩,卡顿。

我电脑上失常,手机也失常,产品说他能复现,而后我去找测试借了个安卓手机,复现进去了。

搜“安卓 css3 animation 动画 卡顿 闪动”,我把搜寻后果前两页翻烂了,也没能找出什么黑魔法能做优化。比拟惯例的优化,之前都做过了。

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

而后我想改一下动画的设置,看看不同的设置,能不能搭配出不卡的成果。

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

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

退出移动版