CSS3中box-shadow的性能问题

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

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

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

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

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

更极端的一个Demo。

44条评论

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

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

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

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

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

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

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

    1. @mice, ❗ IE根本看不到（嗯，9应该可以

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

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

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

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

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

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

评论已关闭。