Matching rules of CSS selector from right to left

In the following example, how does the CSS selector work?

{:;}

But in fact, the read order of the CSS selector isFrom right to left.

The reading sequence of the selector is as follows: first, find all spans, search for h3 along the parent element of span, and add the nodes that match the matching rules to the result set; if the root element html does not match, the path will not be traversed and the process will be repeated from the next span (if multiple rightmost nodes are span ).

Under a CSS rule (for example. mod-nav h3 span) will form an index tree that complies with the rules. The top-to-bottom nodes of the tree are the nodes matching the Selection Characters from right to left in the rule. The specific process of index tree traversal can be seen in a large video of the winter.

Why is the rule from right to left more efficient than the rule from left to right?

Assume that the DOM structure is as follows: the matching rule is. mod-nav h3 span.

If the match is performed from left to right, the process is: From. mod-nav, traverse the child node header and the child node div, and traverse them to the child node. In the branch of the Right div, the branch finally traverses leaf node a and finds that it does not conform to the rule. You need to trace back to the ul node and traverse the next li-a. If there are 1000 li nodes, in this case, the 1000 traversal and backtracking operations will cause a lot of performance loss.

Next, let's look at the matching from right to left: First find all the rightmost node spans. For each span, search for the node h3, and then search for the node class = mod-nav from h3, finally, find the root element html to end the traversal of this branch.

Obviously, the performance of the two matching rules varies greatly. The difference is large because the matching from right to left filters out a large number of rightmost nodes (leaf nodes) that do not meet the conditions in the first step ); however, the performance of matching rules from left to right is wasted on failure searches.

Of course, this is quite obvious. If there are multiple unqualified spans on the leaves, the right-to-left rules will also take some detours (in this case, we need to optimize the CSS selector ). But on average, it is more efficient, because most of the time, in a DOM tree, nodes that meet the matching conditions (such as. mod-nav h3 span) are far less than nodes that do not meet the conditions.

The Sizzle engine used by jQuery 1.3 follows the matching rules of the CSS selector (from right to left) to find and match DOM elements (of course, many optimizations are made ), the performance has been greatly improved.

 

Thank you for your criticism.