Selector Performance

[saxamaphone69]

https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/

After reading this article, ran it through the Edge DevTools.

Keep it mind that some of the selectors are actually from uBlock.

.stub ~ *
:where(b, strong, th, legend, .subject, .name)
.fileText .file-info:has(.fnswitch)
:where(button, input, option, select, textarea)

On page load seem to be the most expensive.

Other notable selectors are

::selection
*
::before
:disabled
:root
::after
::-webkit-scrollbar-thumb
::-webkit-scrollbar
.fileText .file-info a:has(> .fnswitch)
.globalMessage *
.catalog-post .postlnfo *
.pagelist .pages:not(.cataloglink) *
.catalog-post [class^="qmark"]
.fileText a
.file:hover .fileText
:root:not(.bottom-backlinks) .container.not(:empty)::before
#fourchanx-settings legend + *
.postNum > a:first-child
.catalog-post > .postInfo > :not(.subject):not(.nameBlock):not(.dateTime)
#qr .oekaki-bg > *
.stub ~ :not(.threadDivider)

Keep it mind this is with 4x CPU throttling, but faster CSS is faster CSS regardless of throttle.

Also to keep in mind is this appears to only really happen in threads with over 150 replies.

[saxamaphone69]

In a 250 post thread,

Using

.stub + .replacedSideArrows,
.stub + .replacedSideArrows + .post
	display none

takes it under 2500µs.

The original CSS

/* .stub ~ * is probably a little too expensive $$$ - but it's there because
 if json index is off and replies are shown, it covers all bases */
.stub ~ *
	display none

takes 21000µs.

Is the 0.02 seconds (which is 4x slower than normal) in savings worth it?

[saxamaphone69]

:where(b, strong, th, legend, .subject, .name)

In a 400 post thread, 13500µs with 13106 match attempts but only 400 found.

Without :where(), as in just b, strong, th, legend, .subject, .name pings once for the single .subject on the page, and 205µs for .name, with 404 counts for 404 attempts.

[saxamaphone69]

Also, some of those selectors are the original 4chan X CSS that loads, renders, then gets removed.

[saxamaphone69]

Using the free version of Project Wallace:

Though I'm sure the paid version would tell me which of these are more complex. I also am writing in .styl so I don't see the CSS.

[saxamaphone69]

https://jonassebastianohlsson.com/specificity-graph/
https://csswizardry.com/2014/10/the-specificity-graph/

[saxamaphone69]

Using https://isellsoap.github.io/specificity-visualizer/ I had to remove :has() that started with > or +, so for example :has(> .fnswitch) and :has(+ .poster-mod).

A lot of them are red because of poor naming conventions on 4chan X's side and are out of my control (inconsistent naming, lack of generic classes).

Some of them are probably my fault.