“使用高效的CSS选择器”发生了什么，规则？ [英] What happened to the "Use efficient CSS selectors" rule?

问题描述

Google PageSpeed提出了一项建议，要求网站开发人员 使用高效的CSS选择器 ：

避免低效的键选择器
元素的数量可以加快页面呈现速度。

详细

当浏览器解析HTML时，它构造一个内部文档树
，要显示的元素。然后根据
标准CSS级联，继承和排序规则，将
元素匹配到各种样式表中指定的样式。在Mozilla的
实现（也可能是其他）中，对于每个元素，
CSS引擎通过样式规则搜索来找到匹配。引擎
从右到左计算每个规则，从最右边的
选择器（称为键）开始，并移动每个选择器，直到
找到匹配或丢弃规则。 （selector是应该应用规则的文档
元素。）

根据这个系统，引擎评估的规则数b $ b越好。 [...]之后，对于包含大量
元素和/或大量CSS规则的页面，优化规则自身的定义
也可以提高性能。
优化规则的关键在于定义特定于
的规则，并且避免不必要的冗余，以允许风格
引擎快速找到匹配而不花时间评估规则$ b $ com / speed / docs / insights / rules> Page Speed Insights规则 。现在我想知道为什么这条规则被删除。浏览器在此期间是否能够有效地匹配CSS规则？

解决方案

2011年2月，Webkit核心开发者Antti Koivisto 对Webkit中的CSS选择器性能进行了几项改进。 / p>

Antti Koivisto教会CSS样式选择器跳过同级选择器和更快的排序，这带来了一些小小的改进，补丁：一种能够对树形结构启用祖先标识符过滤，在典型的页面加载时减少样式匹配中的剩余时间，以及为简单选择器提供快速路径，从而加快在某些网站上匹配另外50％的速度。

CSS选择器性能已经改变！ （为了更好） by Nicole Sullivan更详细地运行这些改进。总之 -

根据Antti，直接和间接相邻组合器仍然可能很慢，但是，祖先过滤器和规则哈希可以降低影响因为这些选择器将很少匹配。他还说，webkit仍然有很大的空间来优化伪类和元素，但不管它们比使用JavaScript和DOM操作做同样的事情要快得多。事实上，虽然还有改进的余地，他说：

从样式匹配的角度看，几乎一切都会很好。

虽然浏览器在匹配CSS选择器方面要快得多，但值得重申的是，CSS选择器应该仍然优化（例如尽可能保持平面）以减少文件大小并避免特殊性问题。

There was a recommendation by Google PageSpeed that asked web developers to Use efficient CSS selectors:

Avoiding inefficient key selectors that match large numbers of elements can speed up page rendering.

Details

As the browser parses HTML, it constructs an internal document tree representing all the elements to be displayed. It then matches elements to styles specified in various stylesheets, according to the standard CSS cascade, inheritance, and ordering rules. In Mozilla's implementation (and probably others as well), for each element, the CSS engine searches through style rules to find a match. The engine evaluates each rule from right to left, starting from the rightmost selector (called the "key") and moving through each selector until it finds a match or discards the rule. (The "selector" is the document element to which the rule should apply.)

According to this system, the fewer rules the engine has to evaluate the better. [...]. After that, for pages that contain large numbers of elements and/or large numbers of CSS rules, optimizing the definitions of the rules themselves can enhance performance as well. The key to optimizing rules lies in defining rules that are as specific as possible and that avoid unnecessary redundancy, to allow the style engine to quickly find matches without spending time evaluating rules that don't apply.

This recommendation has been removed from current Page Speed Insights rules. Now I am wondering why this rule was removed. Did browsers get efficient at matching CSS rules in the meantime? And is this recommendation valid anymore?

解决方案

In Feb 2011, Webkit core developer Antti Koivisto made several improvements to CSS selector performance in Webkit.

Antti Koivisto taught the CSS Style Selector to skip over sibling selectors and faster sorting, which bring some minor improvements, after which he landed two more awesome patches: one which enables ancestor identifier filtering for tree building, halving the remaining time in style matching over a typical page load, and a fast path for simple selectors that speed up matching up another 50% on some websites.

CSS Selector Performance has changed! (For the better) by Nicole Sullivan runs through these improvements in greater detail. In summary -

According to Antti, direct and indirect adjacent combinators can still be slow, however, ancestor filters and rule hashes can lower the impact as those selectors will only rarely be matched. He also says that there is still a lot of room for webkit to optimize pseudo classes and elements, but regardless they are much faster than trying to do the same thing with JavaScript and DOM manipulations. In fact, though there is still room for improvement, he says:

"Used in moderation pretty much everything will perform just fine from the style matching perspective."

While browsers are much faster at matching CSS selectors, it's worth reiterating that CSS selectors should still be optimised (eg. kept as 'flat' as possible) to reduce file sizes and avoid specificity issues.

这篇关于“使用高效的CSS选择器”发生了什么，规则？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！