color-contrast takes >200s

[connorjclark]

URL: https://james-muriithi.github.io/jCheckBox/

Expectation: color-contrast should finish in ~2s (duration of the second-longest check for the same page).

Actual: ~230s

Motivation: Prevent Lighthouse run from failing to finish.

See: GoogleChrome/lighthouse#10183 (comment)

axe-core version: 3.3.0
Chrome 79

Previous issues: #716

---

Profile-20200114T124246.json.zip

[straker]

Thanks for reporting this. We're actually working on a huge improvement to the color-contrast rule right now. I tested the page using the new code and it can run color-contrast in 10 seconds. That's a bit slower than running it on a page with 50k+ nodes, so I'll do some digging to see if I can boost the performance some more.

[connorjclark]

Super great! Thanks for the quick response :)

[straker]

Alright, I dug into the problem and it turns out that issue is the large syntax highlighted code blocks. When we do color contrast, we look at the clientRects of an element and find each element stack for each rect.

Well it turns out that the large code block has 1981 client rects and so we take a very long time to process this. Even in the latest code it takes 7 seconds to loop over each rect and get all the elements in the stacks. The other code blocks have between 26 and 90 client rects.

We should probably find some way to filter out elements like these since they don't need to be checked for color contrast, just their children.

[padmavemulapati]

I am seeing , the time taking is between 1.6 to 1.74 secs.