不同css从技术及其css性能.docVIP

阳澄湖大闸蟹  HYPERLINK  大闸蟹礼券  HYPERLINK  大闸蟹专卖 HYPERLINK  阳澄湖大闸蟹  HYPERLINK  大闸蟹礼券  HYPERLINK  大闸蟹专卖 HYPERLINK  不同CSS技术及其CSS性能 不同CSS技术及其CSS性能 时间:2013-03-20 09:15点击:5 次 【HYPERLINK javascript:doZoom(16)大 HYPERLINK javascript:doZoom(14)中 HYPERLINK javascript:doZoom(12)小】 一、为什么我要测试CSS的性能 这是背景： 我是HYPERLINK /stubbornella/oocss/OOCSS(译者注：面向对象CSS)的忠实粉丝。但是最近工作，我一直使用HYPERLINK /Compass,HYPERLINK /SASS(译者注：SASS使CSS函数化，有诸如变量，嵌套，混合，继承等特性，需Ruby支持).我有时候感觉到OOCSS和SASS似乎有点古怪。我的一个朋友把我介绍给了HYPERLINK /blog/Chris Eppstein(Compass的创建者)，我们就SASS中的@extend方法进行了探讨。所以我决定创建一个CSS测试页面，用一种很原生态的方式来显示是否SASS的@extend方法和CSS的OOCSS方法之间有着显著的性能差异。 译者补充，下图为SASS@extend继承实现的示例截图： 关于OOCSS，Nicole Sullivan有份不错的ppt教案，具体见下面： HYPERLINK /stubbornella/object-oriented-cssObject Oriented CSS 查看更多HYPERLINK /stubbornellaNicole Sullivan的HYPERLINK /presentations. 本想翻译下的，结果此幻灯片被作者设置为不能下载，要是自己翻译并重新制作份幻灯片，是腾不出那么多时间的，所以作罢。其有两个主要原则： * 分离结构和皮肤* 分离容器和内容 此原则多少与自己“HYPERLINK /wordpress/?p=916CSS样式分离之再分离”一文中提到的一些思想类似。 二、测试如何工作的 此测试制造了差不多2000个box，所有的box都有一个独一无二的背景（样式）。有几种格式用来测试（见下面的链接），你可以逐个更改以测试器速度的差异。只要根据您的意愿点击相应的链接。 此测试用了一小段脚本，此段脚本来自Steve Souder的博文：HYPERLINK /blog/2009/03/10/performance-impact-of-css-selectors/Performance Impact of CSS Selectors(CSS选择器的性能影响) Steve的文章可以说是进入了CSS选择器性能更细致的一个境界，非常值得阅读。 三、CSS格式 1. OOCSS (似乎挺快的)，双class，如：class=box box-#，基本的CSS样式在class box中，然后直添加背景样式在唯一的class中。 2. Sass @extend (速度不确定)，一个class，如class=box-3，然后在基本规则上创建一个多选择器规则，如.box-1, .box-2 {generics}。 3. 嚣张的CSS 添加所有的基本CSS到一个唯一的class上，没有“瘦身”。 4. 使用ID选择器 虽然我不建议使用ID，但是用来测试还是值得一试的。 5. 没有CSS 很好的底线测试 代码示例？ OOCSS样式:一个主class，包含所有的共同规则，然后一个独特的规则使用其他class .box {padding:25px;border:1px solid #000;border-radius:5px;} .box-1 {background-color:#FFEE00;} .box-2 {background-color:#00FFee;} ... @extend样式:将所有的独特class归为一个，逗号分隔的使用公用属性的class列表。 .box-1,.box-2 {padding:25px;border:1px solid #000;border-radius:5px;} .box-1 {background-color:#FFEE00;} .box-2 {background-color:#00FFEE;} ... 长(肿胀)样式：所有的公共样式都分离到独