Question

我正在寻找你可以在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规则列表？

Answer 1

一个很容易做到的事情：使用一个小图像（比方说5x5）作为大区域的背景重复在渲染时很慢。所以建议对重复模式使用更大的图片（例如50x50）。文件大小稍微增加，但性能更好。

Answer 2

避免长路，即

body div div ul li span a {}

避免使用css表达式，例如

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

微软实施的任何东西，如DX等。

Answer 3

为元素分配溢出设置会减慢移动浏览器中的滚动

CSS规则降低浏览器速度（渲染）

3 个答案: