CSS3中box-shadow的性能问题

在对主题评论列表处理的过程中,突然发现嵌套回复性能低下,页面拖动也一卡一卡的。排除法后锁定了目标——box-shadow。

于是做了一些实验,发现如果大量使用box-shadow,又或者容器比较大的时候,性能都会降低很多。如果容器不是很大,数量不是很多,倒没多大的感觉。

如果将box-shadow应用到评论列表中,这个问题就比较明显了,特别是在评论不分页、支持嵌套的情况下。

无论是Firefox还是Chrome,对box-shadow的支持都存在这个问题,Opera则好上很多,带来的迟滞感不是很强。

模仿评论列表小小地做了一个Demo,可以体验到带box-shadow和不带box-shadow的明显区别。

更极端的一个Demo

《CSS3中box-shadow的性能问题》有44个想法

  1. 的确如此,所以我主题原先是有阴影的,后来加上透明、背景后被反映很卡,把阴影去除后好了不少。

      1. @流年, 呃,3.6.10,ubuntu下,也就是linux版的ff才能显示出真正的性能,那个“瘟到死”是什么,你也懂滴!

    1. @低碳生活, 这两个浏览器应该是最遵循W3C标准的了

  2. 你才知道啊。。box-shadow是很影响性能的,所以好多专门为ipad开发的页面上的阴影也没用这个属性,而是使用图片。

    1. @QiQiBoY, 嗯,因为以前没有大量使用,所以没感觉到性能问题。觉得应该是浏览器渲染的问题,因为Opera在这个问题上表现良好

    1. @vastar, 断断续续在弄,不过,最后会不会出来就难说了

    1. @Ludou, 我试了下,虽然IE9 宣称支持,不过好像beta的连border-radius都还没

      1. @流年, box-shadow和border-radius都有,前提是用没有前缀的属性,不是 -ms-box-shadow……

  3. demo做得很好 :mrgreen:
    是你的空间不稳定还是我的线路不稳定?
    总是访问错误

评论已关闭。