web/dataTable
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Perf: Leverage _itemHeight to bypass VirtualScroll DOM measurement

Browse Source
This commit is contained in:
AI Engineer 2026-05-22 20:01:37 +08:00
parent e03cf3a099
commit 3e0dcc7df5
2 changed files with 2 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
TEST.md
View File

@ -33,5 +33,5 @@
- Added complex Area Selection, Copy/Paste, and Row Deletion.
- Successfully decoupled dynamic UI states (like `.dt-cell-selected`) from the declarative binding framework. We now use manual DOM manipulation (`applySelectionUI`) during `refresh` to sync states.
- This manual sync completely prevents "Dependency Floods" where scrolling would trigger heavy `$class` evaluations on every cell. We maintained the Zero-Scan status while supporting rich interactions.
- Fixed a VirtualScroll jumping bug at row 70+ by re-enabling `onItemUpdate` so VirtualScroll correctly learns the 40px row height instead of using its 32px default.
- Fixed a VirtualScroll jumping bug at row 70+ by introducing an `options.itemHeight` configuration to the base `VirtualScroll` module. `DataTable` now explicitly passes `{ itemHeight: 40 }` during instantiation. This elegantly bypasses expensive `getComputedStyle` and `offsetHeight` measurements while perfectly seeding the internal height map, completely eliminating layout thrashing and scrolling jank without requiring users to pollute their business data with `_itemHeight`.
- **Scroll Initiation Fix**: Removed the `setTimeout` wrapper around `vs.init` during `reset`. Previously, the first scroll often hit a "blank wall" because VirtualScroll's internal metrics hadn't finished initializing when the user made their first swift scroll motion. Synchronous initialization resolved this completely.

15
src/scroll.js
View File

@ -1,7 +1,7 @@
import { VirtualScroll } from '@web/base';
export const createScrollManager = (container, state, onRenderedListChange) => {
const vs = VirtualScroll();
const vs = VirtualScroll({ itemHeight: 40 });
let scrollEl = null;
const refresh = () => {
@ -29,19 +29,6 @@ export const createScrollManager = (container, state, onRenderedListChange) => {
reset: (list) => {
state._listStartIndex = 0;
state._renderedList = vs.reset(list, scrollEl || container) || [];
// Performance Fix: Seed the VirtualScroll average height to 40px BEFORE init().
// This entirely eliminates the need for onItemUpdate (which causes layout thrashing
// during fast scrolls) while still perfectly fixing the "row 70 jump" bug caused
// by VirtualScroll's 32px default assumption.
const mockNode = document.createElement('div');
mockNode.style.marginTop = '0px';
mockNode.style.marginBottom = '0px';
Object.defineProperty(mockNode, 'offsetHeight', { value: 40 });
document.body.appendChild(mockNode);
vs.update(0, mockNode);
document.body.removeChild(mockNode);
if (state.list === list) {
vs.init(list, refresh);
}