移动端踩坑记之filter导致的性能问题

今天做一个效果,把页面进行灰化,就是遇到什么公祭日需要把页面灰化那种,依稀记得以前在pc端是用ie的filter处理的,我索性也去查了下,css3果然有这个属性,代码如下

filter: grayscale(100%);

加上去之后完美解决了,但是到真机上测试,发现我刚买的疯7都有点卡,最后测试用5s测试时候,卡的不行,百思不得其姐,猜过是position的问题,猜过是react重复渲染的问题,后来排查都不是,最后才想起用到了filter,果然,就是它导致的,但是,效果不能去掉,后来想到了css驱动硬件加速,所以就加了以下这句代码

 transform: translate3d(0, 0, 0);

问题解决了,这是启用硬件加速的最好方式

最后发现,filter在滑动时,有时候dom都不渲染,最后彻底放弃使用filter了,真的是性能杀手

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,084评论 25 708
  • 从事移动广告商业变现多年,总是觉得产品与商务的同事是一对“欢喜冤家”。站在开发者的角度,关注用户体验最优是无可厚非...
    游社长阅读 8,698评论 2 78
  • 深深的感谢这个五月,借着今夜的射手座满月,带来了乐观扩张的力量,不得不说我是需要这样的,或者说一直以来憧憬着这一天...
    团的花园阅读 299评论 0 1
  • 到南京的火车已经启程,陆弋,你将去的那个城市离我很远很远。意味着我们将不会在某个街口遇见,意味着我们会在时光的冲荡...
    路盐阅读 208评论 0 0
  • 越来越觉得这个世界就是一个骗局。 往往在商场的里面会混杂着化妆品、首饰、食物和健身机构,如果地段不错的话,在商场的...
    酱油瓶ping阅读 342评论 0 0