【转】 解释下浏览器是如何判断元素是否匹配某个 CSS 选择器?
先产生一个元素集合,然后从后往前判断;
浏览器先产生一个元素集合,这个集合往往由最后一个部分的索引产生(如果没有索引就是所有元素的集合)。然后向上匹配,如果不符合上一个部分,就把元素从集合中删除,直到真个选择器都匹配完,还在集合中的元素就匹配这个选择器了。
举个例子,有选择器:
body.ready #wrapper > .lol233
先把所有 class 中有 lol233 的元素拿出来组成一个集合,然后上一层,对每一个集合中的元素,如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上,从这个元素的父元素开始向上找,没有找到一个 tagName 为 body 且 class 中有 ready 的元素,就把原来的元素从集合中删去。
至此这个选择器匹配结束,所有还在集合中的元素满足。大体就是这样,不过浏览器还会有一些奇怪的优化。
注意:
1、为什么从后往前匹配因为效率和文档流的解析方向。效率不必说,找元素的父亲和之前的兄弟比遍历所有儿子快而且方便。关于文档流的解析方向,是因为现在的 CSS,一个元素只要确定了这个元素在文档流之前出现过的所有元素,就能确定他的匹配情况;应用在即使 html 没有载入完成,浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。
2、为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用,遍历每一条 CSS Rule 通过集合筛选,比遍历每一个元素再遍历每一条 Rule 匹配要快得多。
解释下浏览器是如何判断元素是否匹配某个 CSS 选择器的?【一道前端面试题,求解答】
【转】 解释下浏览器是如何判断元素是否匹配某个 CSS 选择器?的更多相关文章
- (3)选择元素——(4)css选择器(CSS selectors)
The jQuery library supports nearly all of the selectors included in CSS specifications 1 through 3, ...
- 『心善渊』Selenium3.0基础 — 8、使用CSS选择器定位元素
目录 1.CSS选择器介绍 2.CSS选择器定位语法 3.Selenium中使用CSS选择器定位元素 (1)通过属性定位元素 (2)通过标签定位元素 (3)通过层级关系定位元素 (4)通过索引定位元素 ...
- 使用CSS选择器定位页面元素
摘录:http://blog.csdn.net/defectfinder/article/details/51734690 CSS选择器也是一个非常好用的定位元素的方法,甚至比Xpath强大.在自动化 ...
- CsQuery获取IDomObject元素的完整CSS选择器
一.方法说明 通过IDomObject元素,获取完整的CSS选择器,过滤HTML和BODY元素,自动将class.id添加到选择器上,优先添加class,无class再添加id.如: <html ...
- jquery判断元素是否出现在可视区
在我们的日常开发中,经常会遇到当元素出现在可视区的时候需要去出发某一事件的情况.我最近在优化环球网首页的时候,将非可视区的代码全部放入到webComponent中.打算当这个元素出现在可视区的时候 ...
- [转] getBoundingClientRect判断元素是否可见
getBoundingClientRect介绍 getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视 ...
- 判断元素(expected_conditions)
判断元素 如何判断一个元素是否存在,如何判断 alert 弹窗出来了,如何判断动态的元素等等一系列的判断,在 selenium 的 expected_conditions 模块收集了一系列的场景判断方 ...
- 用原生JS实现的一个导航下拉菜单,下拉菜单的宽度与浏览器视口的宽度一样(js+html+css)
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
- 如何判断元素是否在可视区域ViewPort
个性签名: 生如夏花,逝如冬雪:人生如此,何悔何怨. 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个 ...
随机推荐
- 实用的 atom 插件
推荐几款我喜欢的Atom插件 时间 2017-05-05 09:00:00 Hi Linux 原文 http://www.hi-linux.com/posts/28459.html 主题 Atom ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 王者归来,Java 程序设计葵花宝典!
致谢 感谢所有关注本号的小伙伴们,这一年来本号的茁壮成长离不开大家的支持. 2018年,继续坚持分享以及为大家谋求福利!!! Java技术栈往期赠书 赠书一:新春第一次送书,价值78元 X 3本 赠 ...
- springboot新手脱坑之无法下载依赖包
1. Apache maven 3.39配置 1.环境变量自己配置, 2.配置阿里云镜像和本地仓库 <localRepository>D:\Apache\maven\repository& ...
- JS数组 编程练习 使用Javascript语言,把以下数组 在页面显示如下图所示的图案
编程练习 使用Javascript语言,把以下数组 var arr = ['*','##',"***","&&","****&quo ...
- sed 批量替换文件
1.想把某个目录下包含only-upstage的文件都替换成onlyu-base sed -i -e 's/onlyu-upstage/onlyu-base/g' ` grep -rl onlyu ...
- android 使用现成做get请求
//接受子线程发来的消息 Handler hanler = new Handler() { @Override public void handleMessage(Message msg) { // ...
- Python 的一些方法
有关 Python 内编写类的各种技巧和方法(构建和初始化.重载操作符.类描述.属性访问控制.自定义序列.反射机制.可调用对象.上下文管理.构建描述符对象.Pickling). 你可以把它当作一个教程 ...
- 新书《iOS应用逆向工程:分析与实战》
前无古人!小白福音!国内第一本iOS应用逆向工程类图书<iOS应用逆向工程:分析与实战>就要空降啦~! 你是否曾因应用上线的第一天即遭破解而无奈苦恼,想要加以防范,却又束手无策? 你是否曾 ...
- Xcode导航栏功能简介
1.Xcode 1.1.AboutXcode 1.2.Preferences General Accounts Behaviors1 Behavior2 Navigation Fonts& ...