likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 49

记录一次排查bug的过程

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

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

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

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

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

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

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

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