Open Bug 2010376 Opened 6 hours ago Updated 3 hours ago

Firefox spends 70x more time than Chrome styling Backbone-Complex-DOM subtest

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Type:
defect

Tracking

()

People

(Reporter: denispal, Unassigned, NeedInfo)

References

(Blocks 1 open bug)

Details

Test can be found here: https://browserbench.org/Speedometer3.1/?suite=TodoMVC-Backbone-Complex-DOM&iterationCount=50

This test is not officially part of SP3 so it's not super important. But Firefox spends 6x more time than Chrome on this test. Specifically, we spend around 70x more time in styling than Chrome does.

  Firefox:
  - Score: 12.52
  Chrome:
  - Score: 66.72

  Firefox Top Styling Functions:
  1. style::rule_tree::compute_rule_node - 2237 samples
  2. style::stylist::Stylist::push_applicable_declarations - 1568 samples
  3. Combined styling: ~3800+ samples

  Chrome Top Styling Functions:
  1. blink::ElementRuleCollector::CollectMatchingRules - 25 samples
  2. blink::StyleResolver::ResolveStyle - 15 samples
  3. blink::SelectorChecker::MatchSelector - 15 samples
  4. Combined styling: ~55 samples

Firefox: https://share.firefox.dev/4sEuYz5
Chrome: https://share.firefox.dev/45clIZa

Blocks: speedometer3

I was curious and I took a quick look, we're hitting I think a rather pathological case. There's this selector in speedometer which I believe is wrong:

.filter-group > div > div > :first-child label {
    padding-top: 1px;
    padding-bottom: 1px;
}

If we try to match it with a random label, and that has no :first-child ancestor, that ends up propagating all the way to the root looking for a :first-child. Then jQuery does something like appending to the <body> to figure out the default display of an element, and that just causes us to restyle the whole <body>...

Can you confirm that removing that selector (or the one above) helps by any chance?

Flags: needinfo?(dpalmeiro)
You need to log in before you can comment on or make changes to this bug.