代码之家 › 专栏 › 技术社区 › Steven Surowiec

CSS选择器的验证方向是什么?

css-selectors optimization css

Steven Surowiec · 技术社区 · 15 年前

我记得有一段时间我在网上看了一段视频,那是雅虎的一位工程师说的,在视频中他提到CSS选择器是由浏览器从右到左而不是从左到右读取的。意义 #body .header .links a 实际上会拉出页面上的所有锚,过滤那些具有类父级的锚 links 有一个班级的家长 header 有个带身份证的家长 body .

我找不到视频,想知道是否有人有任何参考资料来加强这一点,或者这是不正确的?这不意味着 #body .header .links li a 其实比刚才说的慢 #body .links a ?假设这两种方法都适用于给定的页面。

2 回复 | 直到 12 年前

Pekka 15 年前

我认为这篇博客文章是朝着这个方向发展的: Simplifying CSS Selectors

优化CSS选择器的关键是关注最右边的选择器,也称为键选择器(巧合?).这里是一个更昂贵的选择器:A.Class0007*。虽然这个选择器看起来可能更简单,但它比浏览器更昂贵。因为浏览器从右向左移动,所以首先检查与键选择器匹配的所有元素,即_*_。这意味着浏览器必须尝试将此选择器与页面中的所有元素匹配。此图表显示使用此通用选择器的测试页的加载时间与上一个后代选择器测试页的加载时间之间的差异。

我还没有详细读过(这是我的推荐信),但看起来很不错。

Guffa 15 年前

当浏览器与CSS选择器匹配时,它会检查每个规则是否应用于特定元素。因此,从右到左验证选择器是很自然的。

检查选择器 #body .header .links a 匹配元素,首先检查它是否是 a 元素,则如果存在具有类的父级 links ,则如果该元素具有类的父级 header ,则如果该元素的父元素具有ID body .

推荐文章

Hatsune Miku · 比较或if语句是否更快[已关闭]

1 年前

Sky Full Of Stars · 最小化工作流程以及部门和工作站之间的距离

1 年前

Black Swan · 无法解压缩的值太多(应为2)错误

1 年前

Kai · 有什么方法可以轻松优化VSCode中的锈迹?

2 年前

Balfar · 处理NumPy阵列上的循环最有效的方法是什么?

3 年前

santobedi · 使用内部支持的优化器优化scikit learn中用于探地雷达的RBF核的核参数

7 年前

Daniel · C#轻松存储快速访问的大型位矩阵

7 年前

halbe · 优化音频DSP程序的numpy计算

7 年前

Afsara · 是否有任何方法不能优化我们的应用程序?

7 年前

user7353167 · R中预算分配的优化(以前叫Excel Solver)

7 年前