事情是这样的:
小DB接到需求后,开始撸代码了。。。
于是就有下面的一坨代码:
.list-item{
box-shadow: 10px 10px 100px rgba(0, 0, 0,.5);
}
于是小DB回复了
第二天。。。。你们猜发生了什么,啊哈哈哈哈哈哈,小DB被骂的狗血淋头。
没错,效果是实现了,但是在客户反应页面的移动端打开太卡,加载太慢。。。
小DB:卧草?难道我使用的姿势不对?除了这样写我还有怎样?css3这么坑...于是小DB通过chrome performance profile 调试前后对比了一下 加了阴影后的 Painting 耗时明显过高。这应该就是导致页面卡渲染时间过长的根本原因。
解决办法:将阴影设置在对应元素的伪类上,如下:
.list-item{
.....
position:relative;
}
.list-item:after{
content:"";
box-shadow: 10px 10px 100px rgba(0, 0, 0,.5);
position: absolute;
width: 100%;
height: 100%;
left: 0;
top:0;
}
完美解决。哈哈哈。
以上案例是我亲身经历过,当时页面运行一个大的android大屏上,硬件配置比较低,样式又要求好看,于是摸索出来了这么个玩意儿。后来的项目中,从来不会把box-shadow 背景渐变这些样式直接写到元素本身上面,换而采用 :before or :after来实现。
不光是css3, canvas的相关api涉及到阴影,渐变这些,渲染过多,也会有性能问题,各位请慎用。
最后希望我经验分享能够帮助到大家。