zoukankan      html  css  js  c++  java
  • 【CSS】之选择器性能和规范

    http://www.aliued.cn/2013/01/24/%E7%BD%91%E7%AB%99css%E9%80%89%E6%8B%A9%E5%99%A8%E6%80%A7%E8%83%BD%E8%AE%A8%E8%AE%BA.html

    CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面的渲染速度,缩短页面呈现时间。

    我们先来看一下safari和webkit的架构师David Hyatt的两段话:

    1. 样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出
    2. 如果你非常在意页面的性能那千万别使用CSS3选择器。实际上,在所有浏览器中,用 class 和 id 来渲染,比那些使用同胞,后代选择器,子选择器(sibling, descendant and child selectors)对页面性能的改善更值得关注。

    Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序:

    1. id选择器(#myid)
    2. 类选择器(.myclassname)
    3. 标签选择器(div,h1,p)
    4. 相邻选择器(h1+p)
    5. 子选择器(ul < li)
    6. 后代选择器(li a)
    7. 通配符选择器(*)
    8. 属性选择器(a[rel="external"])
    9. 伪类选择器(a:hover,li:nth-child)
  • 相关阅读:
    App如何选择移动广告平台,开发者2
    mouseover与mouseenter与mousemove差额mouseout与mouseleave差额
    JFinal 的源代码超具体的分析DB+ActiveRecord
    Vim经常使用技巧总结1
    2015第4周四网摘
    Java任务调度
    2015第4周二网摘
    2015第4周一
    2015第三周日
    转SpringSided代码规范遵循
  • 原文地址:https://www.cnblogs.com/maomaoroc/p/3621310.html
Copyright © 2011-2022 走看看