I don't have a full list, but this text from mozilla and Servo can be helpful, I think.
WebKit's handling of style updates
Attribute changes
If the element does not already have a style recalc flagged, and if either the attribute is the id attribute or there are selectors that involve the attribute, the element is flagged for a style recalc. There is no attempt to double-check whether those selectors have anything to do with the element and no attempt to handle cases involving '~
' and '+
' at this stage. There is also a separate hook called when class attributes change that amongst other things unconditionally flags the element as needing a style recalc. Again, no attempt is made to handle '~
' and '+
'. In none of these cases is there an attempt to optimize away selector matching on descendants.
State changes
There is no unified setup for state changes in WebKit. For each pseudo-class that is handled via boolean states in Gecko, selector matching has a dedicated function the element that it can call to test whether that pseudo-class matches. Changes to that state inside an element are responsible for directly marking that element as needing style recalc. Again, no attempt to optimize away selector matching on descendants or to handle '+' or '~
' is made. There are some optimizations here similar to the one Gecko makes for :hover
that cover :hover
, :active,
and something about dragging.
Handling of insertions and deletions
The RenderStyle has flags that indicate whether its kids are affected by various structural pseudo-classes and '+
' or '~
' combinators. On DOM mutations, the first affected element after the change (in child list order) is marked as needing a style recalc, or the single first child of the parent if it might need a recalc. If more things before the change might need a recalc, then the parent is marked as needing a style recalc, which will recalc all its kids.
In all of these cases, when actually recomputing style on an element, a check is made to see whether its kids are affected by '+
' or '~
'. If so, then if any child is flagged as needing style recalc either the child after it or all children after it (depending on whether '+
' or '~
' was involved) are also flagged as needing style recalc. There are some bugs here around chains of multiple '+
', I think.
The upshot is that in some cases WebKit ends up recomputing style on a lot more elements than Gecko does, as far as I can tell, but in others it ends up recomputing style on many fewer elements. For example, given a selector like ".foo ~ span
" and a div that changes class from "foo" to "bar", Gecko will restyle all later siblings of the div, while WebKit will not do any work at all if there are no "span" kids, since it would never have marked the parent as being affected by the '+' in that case. I'm not sure to what extent this affects insertion behavior, where it seems like the two should be more similar. Somehow WebKit seems to do better than Gecko on the HTML5 single-page spec scripts, and I can't figure out why at this point. Perhaps this is simply because its style recomputation seems to be much cheaper than Gecko's to actually run.
The other upshot is that the work involved in individual attribute and state changes is much less than in Gecko, at the cost of more style recomputation. The work involved in DOM insertion/deletion is about the same.