842951 - enumerating CSS selectors is much slower than in other major browsers

Status: RESOLVED INCOMPLETE

(Core Graveyard :: Embedding: GRE Core, defect)

Description

[Igor Bukanov]

Attachment: benchmark html

The attached test case creates 10 style sheets each with 250 rules like 

.axy { visisbility: visisble } 

where x and y are replaces by a loop counters. Then it measures time to enumerate over all CSS rules using the following loop:

    var selectors = [];
    for (var i = 0, i_end = document.styleSheets.length; i < i_end; ++i) {
	var style_sheet = document.styleSheets[i];
	var css_rules = style_sheet.cssRules || style_sheet.rules;
	for (var j = 0, j_end = css_rules.length; j < j_end; ++j) {
	    var css_rule = css_rules[j];
            selectors.push(css_rule.selectorText);
        }
    }

The loop only access selectorText, not the style object, for each rule. 

Here is the best timing after 10 runs for different browser on a Windows 7 laptop:

Forefox 19: 13 ms
Chrome 24.0: 6 ms
MSIE 8.0: 9 ms
Opera 12: 5 ms 

That is, the Firefox is the slowest here loosing 45% to old MSIE 8.0 and is more than 2 times slower than latest Chrome and Opera.

Comment 1

[Benjamin Smedberg]

Mass change of bugs in the "Embedding: GRE Core" component in preparation for archiving it. I believe that these are no longer relevant; but if they are, they should be reopened and moved into a component relevant to the code in question.