Use of :has() pseudo-selector hurts performance on some pages

[RickyRomero]

See RickyRomero/shut-up-webextension#68 for more context. I removed all selectors that make use of :has() from shutup.css and it greatly improved performance on my 2018 Intel MacBook Pro when scrolling this page.

We've been making use of :has() more frequently for hiding comments on pages. This has been incredibly useful since it lets you query based on the contents of a given selector, and modern web apps are getting increasingly harder to block comments on because of the abstractions used to build them. But on web apps that make frequent modifications to the DOM, this pseudoselector causes the browser to bog down when recalculating styles.

I need to do some more investigation to see if there are any optimizations I can make that still let us use :has() in shutup.css, but wanted to file this here in case you had any ideas for dealing with this problem.

---

My initial thought, if we can't optimize this problem away, is to move any use of :has() into another stylesheet (shutup-heavy.css) that people can add if they want better comment blocking at the expense of performance. I don't love this idea.

Another approach could be to ban the use of :has() and require using more performant selectors instead, but this would limit our ability to block comments by quite a bit.

Or, we could require any use of :has() be scoped to a specific domain name in the browser extension. We could leave :has() in shutup.css for people who use it as a user stylesheet or with Stylus, but in the browser extension I could have a build step which scopes the selectors to specific domain names.

---

Just spitballing here, again, I haven't looked into whether this can be optimized around or not by writing :has() selectors differently, but wanted to see what you think.

[RickyRomero]

Another option could be to pivot shutup.css into an ad blocker blocklist format:

[Adblock Plus 2.0]

derstandard.at##.communityCanvas
presse.at###newcommentform
tsn.ca###tsnYourCallStory
creativereview.co.uk###feedback
metro.co.uk###metro-comments-area

...and so on.

[RickyRomero]

After thinking about this for a bit, here's where I'm at:

• :has() is too useful to ban from shutup.css, despite the performance cost.
• I can't scope this pseudo-selector in a way that improves performance.
• That means that in order to reduce the performance penalty, we will need to isolate selectors by domain name, and disallow any global rules that make use of :has().

Stylus has a way to scope styles to a domain using a specific format called @-moz-document. We could apply this like so:

@-moz-document domain("derstandard.at") {
  .communityCanvas { display: none !important; }
}

@-moz-document domain("presse.at") {
  #newcommentform { display: none !important; }
}

...and so on.

We could write a simple GitHub Action to convert the new format to today's format – a list of comma-delimited selectors – so that other user stylesheet options can still be used. Both stylesheets could sit side-by-side in the same repo.

shut-up-webextension would ingest the new format and apply the selectors on a per-host basis. The native content blocker extensions for macOS and iOS could also make use of the new format with some conversion; it would be a more native representation anyway since content blockers are expected to have rules scoped to specific domains.

@panicsteve If you prefer to keep your repo simple and continue writing shutup.css the way it's always been done, I can isolate the changes I described above to my own repo, sending pull requests to this repo when I have rules to contribute. These PRs would conform to your current standard without introducing the new domain-scoped format to it.

[panicsteve]

I think it's a good approach to a tricky problem. I feel like the main way people interact with shutup.css these days is through your extension, so it makes sense for it to do the performant thing, and maybe submit the "pure" CSS changes back to this repo as you suggest. Unless that's a ton of extra work for you.

[RickyRomero]

I've started rearranging the stylesheet so I can parse it with a script. The diff is large but the changes are relatively minor: adding domain names to each entry, shuffling a couple of selectors to the general section, removing a couple of defunct sites. Not quite done yet but wanted to provide a status update.