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. Ray Chow

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

    1. 流年 文章作者

      @Ray Chow, 我原本就是想看看你那种如何的 :mrgreen:

    1. 流年 文章作者

      @Mucid, 你用的应该是4.0吧,可能有改进

      1. Mucid

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

    1. 流年 文章作者

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

  2. QiQiBoY

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

    1. 流年 文章作者

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

    1. 流年 文章作者

      @mice, ❗ IE根本看不到(嗯,9应该可以

    1. 流年 文章作者

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

    1. 流年 文章作者

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

      1. be5invis

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

    1. 流年 文章作者

      @卢松松, 大家都在一些一些地用

    1. 流年 文章作者

      @快播电影, ➡ 评论的Ajax效果一抓一大把

  3. Pavel

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

评论已关闭。