CSS规则降低浏览器速度(渲染)

前端之家收集整理的这篇文章主要介绍了CSS规则降低浏览器速度(渲染)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找你可以在CSS代码中犯的最大错误; CSS规则会降低浏览器的速度(渲染).

例如:

.myDraggables {
    Box-shadow: 0px 1px 2px #000 inset; 
    -moz-Box-shadow: 0px 1px 2px #000 inset; 
    -webkit-Box-shadow: 0px 1px 2px #000 inset;

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cdcdcd,endColorstr=#fff);
    background: -webkit-gradient(linear,left top,left bottom,from(#cdcdcd),to(#fff));
    background: -moz-linear-gradient(top,#cdcdcd,#fff);

    border-radius:5px 7px 1px 3px;
    -moz-border-radius:5px 7px 1px 3px;
    -webkit-border-radius:5px 7px 1px 3px;
}

如果你有10个可拖动的元素(里面有很多标签),那么拖动会很慢(混蛋).
那么,有没有人知道你不应该使用的CSS规则列表?

解决方法

一个很容易做到的事情:使用一个微小的图像(比方说5×5)作为大区域的背景重复在渲染时很慢.因此,建议对重复模式使用更大的图片(例如50×50).文件的大小稍微增加,但性能更好.

猜你在找的CSS相关文章