事情是這樣的：

小DB接到需求后，開始擼代碼了。。。

于是就有下面的一坨代碼：

.list-item{

box-shadow: 10px 10px 100px rgba(0, 0, 0,.5);

}

于是小DB回復(fù)了

第二天。。。。你們猜發(fā)生了什么，啊哈哈哈哈哈哈，小DB被罵的狗血淋頭。

沒錯，效果是實現(xiàn)了，但是在客戶反應(yīng)頁面的移動端打開太卡，加載太慢。。。

小DB:臥草？難道我使用的姿勢不對？除了這樣寫我還有怎樣？css3這么坑...于是小DB通過chrome performance profile 調(diào)試前后對比了一下 加了陰影后的 Painting 耗時明顯過高。這應(yīng)該就是導(dǎo)致頁面卡渲染時間過長的根本原因。

解決辦法：將陰影設(shè)置在對應(yīng)元素的偽類上，如下：

.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;

}

完美解決。哈哈哈。

以上案例是我親身經(jīng)歷過，當(dāng)時頁面運行一個大的android大屏上，硬件配置比較低，樣式又要求好看，于是摸索出來了這么個玩意兒。后來的項目中，從來不會把box-shadow 背景漸變這些樣式直接寫到元素本身上面，換而采用 :before or :after來實現(xiàn)。

不光是css3, canvas的相關(guān)api涉及到陰影，漸變這些，渲染過多，也會有性能問題，各位請慎用。

最后希望我經(jīng)驗分享能夠幫助到大家。