DOM nodes count keeps in Performance monitoring tab keeps growing
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 35/100
- issue の種類
- バグ
- 明瞭さ
- 説明が足りない
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend, performance
調査の方向性
リンクされたStackBlitzセットアップとBrave DevToolsのPerformanceモニターを使用して、src/main.tsxにあるReactの無限スクロール例で報告を再現します。スクロール中に増加するDOMノード数をElementsタブと比較し、その後、その動作が想定どおりなのか、cleanupの問題を示しているのかを判断します。原因と必要な修正が検証できれば完了です。
索引モデルが issue の本文から書いたものです。
説明
Describe the bug
I’ve been using this library to virtualise a grid, and while testing, I noticed that the DOM node count keeps increasing when monitoring via the Performance monitoring tab in Brave DevTools.
At first, I assumed it might be an issue with my implementation, so I tested one of the official examples – specifically, the infinite scroll demo from the website.
Inspecting the Elements tab, it does appear that items are being mounted and unmounted correctly as I scroll. However, the total DOM node count continues to rise, which seems unexpected for a virtualised list.
I then wondered if the performance monitor might be counting some kind of 'virtual' or detached nodes, but to compare, I tried react-virtuoso. There, the node count rises initially as you scroll, but drops back down when items go out of view – which is the behaviour I would expect.
Is this increasing DOM node count an expected behaviour with TanStack Virtual, or could it be a memory leak or cleanup issue?
Your minimal, reproducible example
Steps to reproduce
1.) Used the code from the above example, see here.
2.) Open 'Performance monitoring' on this page: https://owailmmbkggithub-0flc--5173--10996a95.local.webcontainer.io/, and then start scrolling.
Expected behavior
Number of DOM nodes should drop back down as user scrolls - it shouldn't keep increasing.
How often does this bug happen?
Appears to be happening consistently.
Screenshots or Videos
https://github.com/user-attachments/assets/1b4f41c2-53a8-4761-8d65-da21568415b5
Platform
- OS: macOS
- Browser: Brave
tanstack-virtual version
3.13.10
TypeScript version
No response
Additional context
No response
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
- 主要言語
- TypeScript
- スター
- 7.1k
- フォーク
- 466
- 平均マージ
- 2日 31分
- マージ済み PR(30日)
- 13
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
TanStack/virtual のほかの issue
-
難易度 4/5 3〜5日 初心者へのやさしさ 55/100
-
難易度 5/5 1週間以上 初心者へのやさしさ 38/100
-
難易度 4/5 3〜5日 初心者へのやさしさ 62/100
-
難易度 4/5 3〜5日 初心者へのやさしさ 55/100
-
難易度 3/5 1〜2日 初心者へのやさしさ 68/100
TanStack/virtual の issue をすべて見る
似ている issue
-
VerificationGate: ATTRIBUTION quote guard never matches a normal quotation (\b around the quote) オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
danielmiessler/LifeOS#2234 ·
-
T: Bug
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
-
難易度 1/5 1時間未満 初心者へのやさしさ 85/100
-
Mend: dependency security vulnerability untriaged
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100