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 的头像

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

  2. Ray Chow 的头像

    不过你那个Demo怎么和我的评论样式那么像呢? 😯

    1. 流年 的头像
      流年

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

  3. Ray Chow 的头像

    幸亏有了Chrome,你那个极端Demo在我浏览器中表现得也不卡 😆

    1. 流年 的头像
      流年

      @Ray Chow, 那个极端的是别人写的

  4. Mucid 的头像

    几乎没有用

  5. Mucid 的头像

    linux版firefox鸭梨不大!

    1. 流年 的头像
      流年

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

      1. Mucid 的头像

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

  6. 低碳生活 的头像

    总感觉Firefox还是Chrome的兼容性都好差

    1. 流年 的头像
      流年

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

    2. Mucid 的头像

      @低碳生活, 孩子,你被IE毒害了! 👿

  7. QiQiBoY 的头像

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

    1. 流年 的头像
      流年

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

  8. mice 的头像

    表示IE无鸭梨… 😥

    1. 流年 的头像
      流年

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

  9. 先看看 的头像

    没有加这个诶

  10. 人好哇! 的头像

    是有蛮大的区别的,看来特效还是适可而止比较好! 😆 这也是我一直提倡的 💡

    1. 流年 的头像
      流年

      @人好哇!, 嗯,要适度

  11. vastar 的头像

    看来新主题在酝酿中。。。

    1. 流年 的头像
      流年

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

  12. zwwooooo 的头像

    看来还不适合大量使用

    1. 流年 的头像
      流年

      @zwwooooo, 的确

  13. Ludou 的头像

    话说box-shadow在IE下还没法实现呢

    1. 流年 的头像
      流年

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

      1. be5invis 的头像

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

  14. 星星之火 的头像

    一般不会嵌套这么多吧

    1. 流年 的头像
      流年

      @星星之火, 但也是会有滴

  15. 卢松松 的头像

    这么快都用上css3啦 😉

    1. 流年 的头像
      流年

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

  16. 快播电影 的头像

    :mrgreen: 正在努力提交中。好厉害。怎么搞的

    1. 流年 的头像
      流年

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

  17. zwwooooo 的头像

    嗯,我又来了,我是来努力提交的 😀

    1. 流年 的头像
      流年

      @zwwooooo, 太辛苦了 ➡ ➡

  18. Jasoon 的头像
    Jasoon

    我擦 这博客终于打开了。

  19. Pavel 的头像

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

  20. 健康减肥网 的头像

    博客不错啊,呵呵

  21. Ygs 的头像

    测试了一下,差不多哦
    假期快乐~

  22. 新乡SEO 的头像

    感觉没有太大的影响 落水鱼

  23. 小杰 的头像

    测试测试~~

  24. su 的头像

    呵呵看不懂 送IP

  25. Firm 的头像

    确实,对比下就很明了

  26. 7cbt 的头像

    国庆都要过了 我才访问进来,这几天出去玩没?

    1. 流年 的头像
      流年

      @7cbt, 没出去,宅一个假期