perf(sidebar): lazy-create per-tab DOM elements to reduce memory usage#3872
Merged
piroor merged 3 commits intopiroor:trunkfrom Feb 28, 2026
Merged
perf(sidebar): lazy-create per-tab DOM elements to reduce memory usage#3872piroor merged 3 commits intopiroor:trunkfrom
piroor merged 3 commits intopiroor:trunkfrom
Conversation
Remove 8 rarely-used elements per tab from the initial HTML template in TreeItemElement.connectedCallback() and create them on demand instead: - extra-items-container (indent/above/below/behind/front): only used by external addons via TST API; lazy getters now create host <span> elements dynamically when first accessed - burster: only needed on background tab load completion; ensureBurster() is called in sidebar-items.js before adding kTAB_STATE_BURSTING - contextual-identity-marker: only needed for Firefox Container tabs; ensureContextualIdentityMarker() is called in _updateTabProperties() when a contextual-identity-* state is detected - native-tab-group-line: only needed for tabs in native tab groups; ensureNativeTabGroupLine() is called in _updateTabProperties() when nativeTabGroup or group is present The highlighter element is intentionally kept in the template because it is needed immediately for active tab and hover states. In tst-api-frontend.js, wildcard operations (id == '*') and collectExtraContentsRoots() now reference backing fields (_extraItemsContainer*Root) to avoid triggering lazy initialization, and clearExtraTabContentsInElement() guards against uninitialized containers. For 100 tabs without external addons, Containers, or tab groups, this eliminates up to 800 DOM nodes and their associated Shadow DOM roots from initial creation.
piroor
reviewed
Feb 28, 2026
piroor
reviewed
Feb 28, 2026
piroor
reviewed
Feb 28, 2026
piroor
reviewed
Feb 28, 2026
piroor
reviewed
Feb 28, 2026
piroor
reviewed
Feb 28, 2026
piroor
reviewed
Feb 28, 2026
Owner
|
ありがとうございます！ 仮想スクロール化で要素数自体をだいぶ減らしたつもりではあるのですが、それでもまだまだ影響が大きかったんですね…… |
tkng
added a commit
to tkng/treestyletab
that referenced
this pull request
Mar 2, 2026
piroor#3872) * perf(sidebar): lazy-create per-tab DOM elements to reduce memory usage Remove 8 rarely-used elements per tab from the initial HTML template in TreeItemElement.connectedCallback() and create them on demand instead: - extra-items-container (indent/above/below/behind/front): only used by external addons via TST API; lazy getters now create host <span> elements dynamically when first accessed - burster: only needed on background tab load completion; ensureBurster() is called in sidebar-items.js before adding kTAB_STATE_BURSTING - contextual-identity-marker: only needed for Firefox Container tabs; ensureContextualIdentityMarker() is called in _updateTabProperties() when a contextual-identity-* state is detected - native-tab-group-line: only needed for tabs in native tab groups; ensureNativeTabGroupLine() is called in _updateTabProperties() when nativeTabGroup or group is present The highlighter element is intentionally kept in the template because it is needed immediately for active tab and hover states. In tst-api-frontend.js, wildcard operations (id == '*') and collectExtraContentsRoots() now reference backing fields (_extraItemsContainer*Root) to avoid triggering lazy initialization, and clearExtraTabContentsInElement() guards against uninitialized containers. For 100 tabs without external addons, Containers, or tab groups, this eliminates up to 800 DOM nodes and their associated Shadow DOM roots from initial creation. * Optimize with mapAndFilter * Add DOM structure design comment for future development --------- Co-authored-by: YUKI "Piro" Hiroshi <piro.outsider.reflex@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
TreeItemElement.connectedCallback()の初期HTMLテンプレートから、使用頻度の低い8つのDOM要素を除去し、必要になった時点で初めて生成するようにします。正直、コードが複雑になってレビューもややこしく、その点については申し訳ないのですが、以下のように、割と効果が高そう（20タブ程度でPSSで25MB程度のメモリ消費量の削減）なので、お手漉きの際にレビューをお願いします。
条件は以下のような感じです
対象の要素:
<span>要素を生成します。sidebar-items.jsでkTAB_STATE_BURSTINGを付与する前にensureBurster()を呼び出します。_updateTabProperties()でcontextual-identity-*状態を検出した際にensureContextualIdentityMarker()を呼び出します。_updateTabProperties()でnativeTabGroupまたはgroupが存在する場合にensureNativeTabGroupLine()を呼び出します。highlighter要素は、アクティブタブやホバー状態で即座に必要となるため、テンプレートに残しています。
tst-api-frontend.jsでは、ワイルドカード操作（id == '*'）やcollectExtraContentsRoots()がbacking field（_extraItemsContainer*Root）を参照するように変更し、不要なlazy初期化の発火を防止しています。また、clearExtraTabContentsInElement()では未初期化のコンテナに対するガードを追加しています。外部アドオン・コンテナー・タブグループを使用しない100タブの環境で、初期生成から最大800個のDOMノードとそれに伴うShadow DOMルートを削減できます。