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

use*_*727 8 css optimization

我正在寻找你可以在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;
}
Run Code Online (Sandbox Code Playgroud)

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

Vil*_*kas 3

一个很容易制作的方法:使用小图像(比如 5x5)作为大区域的背景重复在渲染时会很慢。因此,建议对重复图案使用更大的图片(例如 50x50)。文件大小仅增加一点,但性能却更好。