移动端页面性能杀手

事情是这样的：

小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涉及到阴影，渐变这些，渲染过多，也会有性能问题，各位请慎用。

最后希望我经验分享能够帮助到大家。