css优化学习

http://www.orzpoint.com/profiling-css-and-optimization-notes/

1. 其实并不存在最快的规则,我们通常做法是把样式模块合并到一个文件中试用,这样会导致其中的一部分样式并没有被特定的页面用到。其实把没用的样式规则拿掉是优化 CSS 的最好的方法之一,因为这样的话就可以省去多余的样式匹配,当然合并多个文件到一个大文件还是有好处的,比如说可以减少请求数,但是我们应该只把跟当前页面有关的样式打包到一起。

其实这也不算什么新发现了,Page Speed 早就有过这条建议。不过,我还被它的效果吓到了,去掉多余样式让我节省了大约 200-300ms 的选择器匹配时间(根据Opera 调试工具的结果)。

2. 减少 reflow,这是另外一条总所周知的规则,起了非常大的作用。性能消耗多的样式规则在只有少量 reflow/repaint 的时候并不没有产生那么的性能消耗,但是一条很简单的规则却有可能让这个网页慢起来,所以减少 reflow 必须和减少样式复杂度一起做起来。

3. 性能消耗最大选择器应该是 * 和多 class 选择器(比如 .foo.bar, .foo.bar.baz qux),我们都最大这个,不过最好还是通过分析确定一下

4. 要注意那些本来不需要用的全选符 *,我发现过一个选择器是这样的:button > *,但是我找遍了整个网站,发现所有按钮只有一个 <span> 在里面,所以把 * 换成 span 就可以换来很多的提升,因为浏览器已经不需要去匹配所有的元素了(因为从右向左匹配原则),只需要查找所有的 span,而 span 的数量远比所有元素少,然后再查找父元素是 button 的 span 即可,所以应该把 * 替换成其他标签,不过通常比较麻烦。这种优化的问题是损失了一些可扩展性,因为修改 HTML 之后也需要修改 CSS,你也不能日后再去修改按钮的样式,这样会产生一些无用的规则,所以这条规则我还不怎么确定,还是针对自己的实际情况来做优化吧,除非渲染引擎修改选取规则否则这种优化可以先忽略(译者注:其实通过加 class 而不用 tag 就可以解决这个问题)。

6. 在 Opera 和 WebKit 中 [type=”…”] 比 input[type=”…”] 更加耗时,可能是浏览器认为属性检测对于特定的标签来说才是比较通用方法。

7.跟居 Oprea 的分析工具, ::selection 和 :active 是最为耗时的选择器。可理解的是 :active 为什么还是,但是 ::selection 就不知道为什么了,可能是分析工具的bug,或者浏览器本身的渲染方式决定。
8. 在 Opera 和 WebKit 中, border-radius 是最耗时的属性之一,甚至比 shadow 和 gradient 和耗时,要注意的是它不影响布局生成时间只影响 repaint 时间。

总结

  • 减少选择器的数量 (包括这样的跟浏览器有关的: .ie7 .foo .bar
  • 不要用通配符(包括想这样不规范的类型选择符[type="url"]
  • 页面的缩放比例是会影响 CSS 性能的(比如: Opera)
  • 窗口大小也会影响 CSS 性能 (比如: Chrome)
  • 页面反复重新加载会降低 CSS 性能 (比如 Opera)
  • “border-radius” 和 “transform” 是性能最差的 CSS 属性(至少在WebKit & Opera 中是)
  • 基于 WebKit 的浏览器中,Timeline 栏可以算出总的样式 计算/reflow/repaint 时间
  • WebKit 中的选择器匹配快得多很多
  • 最后编辑于
    ©著作权归作者所有,转载或内容合作请联系作者
    • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
      沈念sama阅读 203,098评论 5 476
    • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
      沈念sama阅读 85,213评论 2 380
    • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
      开封第一讲书人阅读 149,960评论 0 336
    • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
      开封第一讲书人阅读 54,519评论 1 273
    • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
      茶点故事阅读 63,512评论 5 364
    • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
      开封第一讲书人阅读 48,533评论 1 281
    • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
      沈念sama阅读 37,914评论 3 395
    • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
      开封第一讲书人阅读 36,574评论 0 256
    • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
      沈念sama阅读 40,804评论 1 296
    • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
      茶点故事阅读 35,563评论 2 319
    • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
      茶点故事阅读 37,644评论 1 329
    • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
      沈念sama阅读 33,350评论 4 318
    • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
      茶点故事阅读 38,933评论 3 307
    • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
      开封第一讲书人阅读 29,908评论 0 19
    • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
      开封第一讲书人阅读 31,146评论 1 259
    • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
      沈念sama阅读 42,847评论 2 349
    • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
      茶点故事阅读 42,361评论 2 342

    推荐阅读更多精彩内容