【转】 解释下浏览器是如何判断元素是否匹配某个 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这几个 ...
随机推荐
- for循环总结
1.冒泡排序的总结:其实这个很简单的理解,就是用数组里面的第0个元素(也就是[]里面的第一个数,按照数组的话是第一个,让他们进行挨个比较),示例: 排序前: 14 62 38 41 53 62 71 ...
- 5020: [THUWC 2017]在美妙的数学王国中畅游
传送门 当年听llj讲的时候觉得这简直是个不可做的神题. 现在看来并不是很神,可能是我已经被剧透了的缘故... 一开始以为是函数套函数,懵蔽了好久,结果只是求和 被剧透了泰勒展开就比较水了..只要你不 ...
- gradle配置全局仓库
1.在系统环境变量中配置: GRADLE_USER_HOME=D:\gradleRepository 2.在配置的路径中,增加文件init.gradle allprojects{ repositori ...
- Vue Virtual Dom 和 Diff原理(面试必备) 极简版
我又来了,这是Vue面试三板斧的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念: 用js来模拟DOM中的节点.传说中的虚拟DOM. 再来一张图: 是不是一下子秒懂 没懂再来一张 ...
- [ZJOI 2018]历史
题意:给定一棵树和点的\(Access\)次数,求切换链的最大值. 考虑修改时实边与虚边的贡献,用\(LCT\)维护此树. // luogu-judger-enable-o2 #include< ...
- hexo next主题深度优化(十),博文加密,不需要插件,极简模式,相对安全,融合pjax。
文章目录 效果: 代码: 注意: 背景: 思路: https://www.jianshu.com/p/90c0a15c6f36 http://zhailiange.com/2017/07/06/hex ...
- 动态调整Log4j日志级别
log4j2.xml配置文件中支持配置monitorInterval参数,检测到配置改变后重新加载,达到动态调整日志级别的效果. 故调整日志级别无须手动重启服务. log4j2.xml配置文件示意: ...
- MongoDB特性及使用场景
概述 MongoDB(Humongous Database),中文意思就是巨大无比的数据库,顾名思义,MongoDB就是为处理大数据而生,以解决海量数据的存储和高效查询使用为使命.MongoDB是一款 ...
- 9.2 sun.py
import requests from bs4 import BeautifulSoup url = 'http://wz.sun0769.com/index.php/question/reply? ...
- LeetCode 38.报数(Python3)
题目: 报数序列是一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 111221 1 被读作 "one 1& ...