重印和回流.它很容易造成不必要的重绘和反弹,从而使整个页面滞后.阅读：http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/极限例：http://files.myopera.com/c69/blog/lag-me.html
>滚动和悬停.滚动或悬停时,浏览器必须呈现新的内容. Webkit在这里很聪明,因为它将页面缓存为静态图像,因此当您滚动时不会渲染页面.但是,您可以绕过此优化,通过使用您正在滚动的块中的透明背景,在旋转中添加旋转,添加位置：固定粘性页眉/页脚等等 – 效果会在不同的浏览器中警惕,Opera似乎最多目前受影响.
盒子阴影是邪恶的.盒子阴影在不同的浏览器中具有不同的渲染质量(在Webkit中为低,Opera / IE9中的高,Firefox版本各不相同) – 因此,它们在不同浏览器之间的性能影响是不同的 – 但是插入框阴影和盒阴影任何浏览器中重绘的大扩展半径都可能导致可观察的挂起.
浮动,桌子和他们的朋友都是邪恶的.听起来很疯狂,但阅读这篇文章(俄语) – http://chikuyonok.ru/2010/11/optimization-story/ – 它可能会节省你头发上的一些头发.主要思想是 – 漂浮元素的孩子导致链条回流修改一路上升.
边界半径非常昂贵,比梯度更贵.不影响布局,但会影响重绘. http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/>渐变滞后CSS渐变是非常酷的新工具,我是他们的粉丝.然而,只有几个测试表明你不应该使用它们,如果你计划有很多元素与渐变并需要响应界面:(有一个解决方法/黑客,但是,使用画布渲染渐变图像和设置他们通过数据url作为背景.透明度很贵如果你有一些移动元素交叉,半透明(不透明度<0,rgba颜色,png,圆角(！)) - 期望滞后.通常可以通过限制可以覆盖的透明元素的数量来计算出来.>转换比JS更好,但是如果您将应用程序同时应用于超过150个元素,则Firefox无法正确呈现转换. Opera无法在前后应用转换. IE9根本不支持它们.在使用它们之前进行测试,但一般来说 – 它们比JS类似物(jQuery.animate)快.>注意cpu负载.它很难测量内存使用跨浏览器(但您可以使用chrome和内插结果,使用一些盐),但它易于观察cpu使用(通过Process Explorer或系统工具).峰值将显示您的位置,您需要注意.>旧版浏览器很旧不要尝试使IE6,Firefox 2,Safari 3现代化.那些浏览器从来不应该处理酷的新东西.让他们一个人只需提供基本样式的基本内容.剩下的IE6用户将会感谢.