降低浏览器速度的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个可拖动的元素（里面有很多标记），那么拖动速度会非常慢（jerk）。

---

那么，有人知道你不应该使用的CSS规则列表吗？

一个很容易制作的规则：在渲染大区域时，使用小图像（比如5x5）作为背景重复是很慢的。因此，建议对重复模式使用更大的图片（例如50x50）。文件大小只增加了一点，但性能要好得多。

避免长路径，即

body div div ul li span a {}

避免css表达式，即

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

---

微软实现的任何东西，如DX等，都会降低移动浏览器中的滚动速度。为元素分配溢出设置通常是多种样式的组合。在这种情况下，渐变、圆角、拖动的组合以及它们中的许多。这也取决于浏览器。IE8比FF有一些优势，反之亦然，Chrome似乎真的能很好地处理一切。希望这个老答案能帮助你-我的经验是，固定的背景图像也能减缓滚动时的渲染。你能举出一些支持文献吗？