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

下面这个栗子,CSS选择器它是如何工作的?

.mod-nav h3 span {font-size: 16px;}

如果不知道匹配规则,可能的理解是从左向右匹配:先找到.mod-nav,然后逐级匹配h3、span,在这个过程中如果遍历到叶子节点都没有匹配就需要回溯,继续寻找下一个分支。

但事实上,CSS选择器的读取顺序是从右向左

还是上面的选择器,它的读取顺序变成:先找到所有的span,沿着span的父元素查找h3,中途找到了符合匹配规则的节点就加入结果集;如果直到根元素html都没有匹配,则不再遍历这条路径,从下一个span开始重复这个过程(如果有多个最右节点为span的话)。

在某条CSS规则下(比如.mod-nav h3 span),会形成一条符合规则的索引树,树由上至下的节点是规则中从右向左的一个个选择符匹配的节点。索引树遍历的具体过程可以看寒冬大大的一段视频

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

假如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)远远远远少于不符合条件的节点。

jQuery从1.3版本开始使用的Sizzle引擎,它按照了CSS选择器的匹配规则(从右至左)进行DOM元素的查找与匹配(当然其中做了很多优化),性能得到了很大的提升。

欢迎批评指正。

[创新工场2014] 2014创新工场校园招聘笔试题

  继上一篇博文《[创新工厂2014]回文修复后,继续推出第二道创新工厂的笔试算法题~

  对于非负数列a1、a2、......、an,在数轴上做垂线连接点(i,0)和(i,ai)。选择这样的两条线和x轴可以形成一个容器,我们以面积代表所装的水,求以这种方式构成的容器能装的最大面积。比如选择a2=3、a5=6,则所装的面积为9。

分析:

  这道题实际上的意思是:对于一个给定的序列,求abs(i-j)*min(a[i],a[j])的最大值!

  先对序列按照高度排序,然后按照排序后的顺序进行枚举,枚举过的就做标记,表示已经访问过了,保证了当前的节点,是序列里的最小高度的板,那么以这个板为边界能装的最大的水,肯定就是当前序列的最左边,或者最右边,因为没有其他板比当前板更矮了,分别计算,并且update最大值。

  如果当前这个节点就是边界,且已经访问过(即比当前的节点的高度更小),那么就要对L和R进行收缩,保证L和R是当前节点能构成最大容器的最远边界。

代码如下:

#include <cstdio>
#include <cstdlib>
#include <algorithm>
#include <limits.h>
using namespace std;

#define max(a,b) a>b?a:b

typedef struct Pair{
int i;
int ai;
}Pair;
Pair p[101];

int n;

int flag[101];

bool cmp(Pair a,Pair b)
{
if(a.ai<b.ai)
return true;
else
return false;
}
int main()
{
freopen("b3.in","r",stdin);
freopen("b3.out","w",stdout);

int maxRes;
int L,R;
while(scanf("%d",&n)!=EOF)
{
memset(flag,0,sizeof(flag));
maxRes = INT_MIN;
for(int i=0; i<n; i++)
{
scanf("%d",&p[i].ai);
p[i].i = i;
}
sort(p,p+n,cmp);
L=0;
R=n-1;
for(int i=0; i<n; i++)
{
flag[p[i].i] = 1;
maxRes = max(maxRes,abs(L-p[i].i)*p[i].ai);
maxRes = max(maxRes,abs(R-p[i].i)*p[i].ai);

if(p[i].i==L)
{
while(flag[L]==1) L++;
}
if(p[i].i==R)
{
while(flag[R]==1) R--;
}
}

printf("%d\n",maxRes);

}
return 0;
}

  如果有错误的地方,还望大家及时指出,谢谢~

 
 
标签: CSS

最新文章

  1. 《舌尖上的中国》第二季今日首播了,天猫食品也跟着首发,借力使力[bubuko.com]
  2. Leetcode 306. Additive Number
  3. hdu5057 Argestes and Sequence 分块
  4. CSS3基础 02(2D /3D)
  5. 8.8 CSS知识点1
  6. 只有图片拼接的html页面图片之间有白条的解决方法
  7. zw版【转发&#183;台湾nvp系列Delphi例程】HALCON InpaintingCt1
  8. 使用BootStrap制作用户登录UI
  9. 客户端访问WebService和PageMethod
  10. fedora 20 注销
  11. Let&#39;s go! (Ubuntu下搭建Go语言环境)
  12. HDU 5624 KK&#39;s Reconstruction 最小生成树
  13. java正则表达式入门基础
  14. python学习day12
  15. C# winfrom中Flash播放使用axShockwaveFlash控件设置透明XP出现白色背景解决办法,仿QQ魔法表情效果
  16. 有关android源码编译的几个问题
  17. android:GLSurfaceView绘制bitmap图片及glViewport调整的效果
  18. An Introduction to Stock Market Data Analysis with R (Part 1)
  19. Objective-C的继承与组合
  20. LeetCode(24)-Balanced Binary Tree

热门文章

  1. 设置Debian8 光秃秃的桌面(图标,窗口样式等)
  2. 【JUC】JDK1.8源码分析之LockSupport(一)
  3. MYSQL进阶,新手变司机
  4. 无法远程连接ubuntu下的mysql
  5. [saiku] 配置saiku实时展现查询数据
  6. 服务器的Arch Linux,CentOS的,Debian的,Fedora的,Gentoo的,openSUSE的,Slackware的,和Ubuntu哪个好
  7. jquery保存用户名和密码到cookie里面
  8. NoSQL之Redis高级实用命令详解--安全和主从复制
  9. function 中定义函数的默认返回值,
  10. KMP学习笔记
  11. 墙体裂缝推荐的情况下驱动的PhoneGap入门,早看早收据
  12. NumPy基础:数组和矢量计算
  13. USTC 1119 graph 图的同构
  14. springMVC源码分析--AbstractDetectingUrlHandlerMapping(五)
  15. JAVA DOM4j解析XML数据到自定义javabean
  16. 搭建微服务器:express+https+api代理
  17. scrapy相关:splash安装 A javascript rendering service 渲染
  18. poj2393 Yogurt factory(贪心,思考)
  19. CentOS之Shell基础
  20. org.hibernate.TransientObjectException异常