Can we use less memory even we need to construct tons of combination?

[mika-cn]

I was testing css-selector-generator with an element that has 29 attributes, and some of them have long values, such as an URL. I used the default getCssSelector(element) without pass in an option. It ate up almost 1GB, which is so crazy. I did try to find out what happened, and notice that there's tons of combination of different selector parts.

Can we just store these different values in one place and just generate combinations use indexes or some sort of IDs. So we don't need to copy the same value so many times?

[fczbkk]

Hey @mika-cn, thanks for reporting this. The attributes you are mentioning, are they just regular URLs, or are they something like base64 encoded images?

[mika-cn]

@fczbkk They are regular URLs.

I got the HTML element from reddit: https://www.reddit.com/r/RooCode/comments/1kmolud/deep_research_mode_for_roo/

Here's the HTML tag:

<shreddit-post class="block
    xs:mt-xs xs:-mx-xs xs:px-xs xs:rounded-[16px] pt-xs nd:pt-xs bg-[color:var(--shreddit-content-background)] box-border nd:visible nd:pb-2xl mb-xs" permalink="/r/RooCode/comments/1kmolud/deep_research_mode_for_roo/" content-href="https://www.reddit.com/r/RooCode/comments/1kmolud/deep_research_mode_for_roo/" view-context="CommentsPage" vote-type="" comment-count="20" moderation-verdict="" previous-actions-feature="" user-id="" is-embeddable="" is-desktop-viewport="" is-awardable="" created-timestamp="2025-05-14T19:47:24.062000+0000" domain="self.RooCode" id="t3_1kmolud" post-title="Deep research mode for Roo" post-language="en" post-type="text" score="48" subreddit-id="t5_dd2ytv" subreddit-prefixed-name="r/RooCode" author-id="t2_3l6s8a5h" author="Primary-Mix-4011" icon="https://www.redditstatic.com/avatars/defaults/v2/avatar_default_5.png" data-expected-lcp="" subreddit-name="RooCode" post-comment-tap-exp="" share-button-ssr="" item-state="UNMODERATED">
  CONTENT
</shreddit-post>

And the test i used:

console.debug("<<<<<<<<<<");

import getCssSelector from './index.js';

const elem = document.querySelector('shreddit-post');
const selector = getCssSelector(elem);
console.debug(selector);

[fczbkk]

@mika-cn Yeah... it's hard to do optimizations for situations like this; when a website is spamming the attributes like that. There are two options:

You can set the maxCombination option to reduce the number of produced combinations to some acceptable number. I think this is the simplest solution. See the documentation at https://github.com/fczbkk/css-selector-generator?tab=readme-ov-file#max-combinations

Or you can use the blacklist option to filter out non-relevant attributes that should not be considered for selectors. This can work well for some frameworks, where they use some well-defined patterns for attribute names. See the documentation at https://github.com/fczbkk/css-selector-generator?tab=readme-ov-file#blacklist

[mika-cn]

@fczbkk

I did pass maxCombination and blacklist options in my own project before open this issue.

Today, I tried to optimize the creation of selector combinations. I use iterators to defer the creation. So that the creation of combination only happen when we need to test the selector.

Now if the test of first couple selectors success, we never generate the rest of combinations. This way, we can avoid consume a lot of memory.

I've pushed my test code to test-css-selector-generator. This is only a test, and the change is made is on Javascript files (I generated them with source map files), not TypeScript files. The latest commit of master branch is my changes. And there is a branch called test contains a simple html page to test the code.

I know nothing about TypeScript and i failed to setup the developerment environment (npm is killing me everytime i try). So, sorry I'm not going to create a pull request. It should be very easy to apply my changes to TypeScript source files If you decide to. And please don't feel sorry or anything if you decide not to.