https://segmentfault.com/q/1010000000713509

CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式。

首先,对浏览器来说,ID 选择器 #xx 是最快的,其次是 class 选择器、html 元素选择器等。


那为什么从右向左的规则要比从左向右的高效?

如图:

假如 DOM 的结构如上图,匹配规则是 .mod-nav h3 span。
若从左向右的匹配,过程是:从 .mod-nav 开始,遍历子节点 header 和子节点 div,然后各自向子节点遍历。在右侧 div 的分支中,最后遍历到叶子节点 a ,发现不符合规则,需要回溯到 ul 节点,再遍历下一个 li-a,假如有 1000 个 li,则这 1000 次的遍历与回溯会损失很多性能。
再看看从右至左的匹配:先找到所有的最右节点 span,对于每一个 span,向上寻找节点 h3,由 h3再向上寻找 class="mod-nav" 的节点,最后找到根元素 html 则结束这个分支的遍历。
很明显,两种匹配规则的性能差别很大。之所以会差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点);而从左向右的匹配规则的性能都浪费在了失败的查找上面。
当然这是比较明显情况,如果在叶子上存在多个不符合条件的 span,从右向左的规则也会走一些弯路(这时就需要优化 CSS 选择器了)。但平均来说它还是更高效,因为大多时候,一个 DOM 树中,符合匹配条件的节点(如 .mod-nav h3 span)远少于不符合条件的节点。

此段转载自:http://www.cnblogs.com/zhaodongyu/p/3341080.html 经过编辑及排版。


但是后来人们发现这种方式很不符合人类自然的思考方式,所以在建造 web 的时候更喜欢采用看起来比较有条理的更加像后端程序的层次结构方式命名,类似 #fuck .you a {...}

但是根据实践,大家发现这样基本是在 自high,因为别人在改 CSS 的时候是不会去看你写的 CSS 的,都是直接浏览器定位到位于哪一行,直接过去改代码块,反正一眼就能看懂。

其实不用纠结这些,CSS 的解析时间跟 js 执行时间相比就像 PHP 代码的运行时间和数据库、I/O运行时间对比一样,不是一个数量级,完全不用担心。

css选择器选择顺序是从右往左的,为什么?的更多相关文章

  1. 为什么排版引擎解析 CSS 选择器时一定要从右往左解析?

    首先我们要看一下选择器的「解析」是在何时进行的. 主要参考这篇「 How browsers work」(http://taligarsiel.com/Projects/howbrowserswork1 ...

  2. CSS 选择器 选择 拥有多个类名 的元素

    今天开发的时候,碰到这个连起来的类名. 才想起来,这个类似于 <div class="node hide"></div> 连起来写,表示找到  拥有这两个类 ...

  3. CSS选择器渲染效率

    1 浏览器如何识别你的选择器 首先我们需要清楚,浏览器是如何读取选择器,以识别样式,并将相应的样式附于对应的HTML元素,达到美化页面的效果.Chris Coyier曾在<Efficiently ...

  4. CSS选择器的优化

    前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS基本选择器.CSS属性选择器以及CSS伪类选择器.那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化.因为对性能这 ...

  5. CSS选择器从右向左的匹配规则

    CSS选择器从右向左的匹配规则 下面这个栗子,CSS选择器它是如何工作的? .mod-nav h3 span {font-size: 16px;} 如果不知道匹配规则,可能的理解是从左向右匹配:先找到 ...

  6. css选择器顺序的小技巧

    在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...

  7. 编写高效的CSS选择器

    高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题. 很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能 ...

  8. 【CSS】381- 提升你的CSS选择器技巧

    我已经使用CSS多年了,但直到最近我才深入研究了一下CSS选择器. 我为什么要这样做呢?我们都知道选择器,但麻烦的是随着时间的推移,很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情. ...

  9. python css选择器

    css 选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. bug管理规范

    资源来自:http://wenku.baidu.com/view/ae55b3b565ce05087632132b.html

  2. SQL SERVER2012秘钥

    来自网络: MICROSOFT SQL SERVER 2012 DEVELOPER 版(开发版)序列号:YQWTX-G8T4R-QW4XX-BVH62-GP68YMICROSOFT SQL SERVE ...

  3. android 学习随笔二十七(JNI:Java Native Interface,JAVA原生接口 )

    JNI(Java Native Interface,JAVA原生接口) 使用JNI可以使Java代码和其他语言写的代码(如C/C++代码)进行交互. 问:为什么要进行交互? 首先,Java语言提供的类 ...

  4. MYSQL 下一些常用操作命令:新建用户、修改密码、修改登录host等

    1.登录服务器 mysql -u <用户名> -p 2.增加用户,并同时授权操作权限 grant select,insert,update,delete on <数据库>.* ...

  5. MEANIO

    sudo npm install -g bower sudo npm install -g meanio sudo bower cache clean --allow-root sudo mean i ...

  6. 【Pro ASP.NET MVC 3 Framework】.学习笔记.6.SportsStore:导航

    在之前的章节,偶们设置了核心的基础设施,现在我们将使用基础设计添加关键特性,你将会看到投资是如何回报的.我们能够很简单很容易地添加重要的面向客户的特性.沿途,你也会看到一些MVC框架提供的附加的特性. ...

  7. restful 注解

    @Path @Path 注释被用来描述根资源.子资源方法或子资源的位置.value 值可以包含文本字符.变量或具有定制正则表达式的变量. @GET.@POST.@PUT.@DELETE.@HEAD @ ...

  8. Centos7下使用ELK(Elasticsearch + Logstash + Kibana)搭建日志集中分析平台

    日志监控和分析在保障业务稳定运行时,起到了很重要的作用,不过一般情况下日志都分散在各个生产服务器,且开发人员无法登陆生产服务器,这时候就需要一个集中式的日志收集装置,对日志中的关键字进行监控,触发异常 ...

  9. 使用KNN对MNIST数据集进行实验

    由于KNN的计算量太大,还没有使用KD-tree进行优化,所以对于60000训练集,10000测试集的数据计算比较慢.这里只是想测试观察一下KNN的效果而已,不调参. K选择之前看过貌似最好不要超过2 ...

  10. winform——绑定DataGridView

    ==========================================================================================重点需要掌握==Au ...