Skip to content

Profile-guided performance optimization for scrolling #284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
texodus merged 1 commit into from
Aug 11, 2026
Merged

Profile-guided performance optimization for scrolling #284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 40 additions & 9 deletions src/ts/events.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel {
private _memo_touch_startY?: number;
private _memo_touch_startX?: number;
private _last_clicked_time?: number;
private _scroll_dirty?: boolean;
private _scroll_left?: number;
private _scroll_top?: number;
register_listeners() {
// // TODO see `_on_click_or_dblclick` method jsdoc
// this.addEventListener("dblclick", this._on_dblclick.bind(this));
Expand All @@ -56,18 +59,40 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel {
*/
async _on_scroll(event: Event) {
event.stopPropagation();
this._scroll_left = this.scrollLeft;
this._scroll_top = this.scrollTop;
if (this._scroll_pending) {
this._scroll_dirty = true;
return;
}

this._scroll_pending = true;
const width = this._table_clip.clientWidth;
const height = this._table_clip.clientHeight;
const container_height = this.clientHeight;
try {
await new Promise(requestAnimationFrame);
await throttle_tag(this, async () => {
do {
this._scroll_dirty = false;
const commit = await this.predraw(width, height, {
invalid_viewport: false,
cache: true,
throttle: false,
container_height,
scroll_left: this._scroll_left,
scroll_top: this._scroll_top,
});

if (!commit.inline) {
await new Promise(requestAnimationFrame);
commit();
}
} while (this._scroll_dirty);
});
} finally {
this._scroll_pending = false;
}

await this.draw({ invalid_viewport: false, cache: true });
this.dispatchEvent(new CustomEvent<undefined>("regular-table-scroll"));
}

Expand Down Expand Up @@ -232,7 +257,9 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel {
}

td.classList.remove("rt-cell-clip");
this.table_model.body._untagColumn(td);
if (!this._column_classes) {
this.table_model.body._untagColumn(td);
}
}
}

Expand Down Expand Up @@ -384,16 +411,20 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel {
// Update header clipping class
th.classList.toggle("rt-cell-clip", should_clip);

// Update body cell clipping classes. Clipped cells must carry the
// column tag so the override's `max-width` clamp reaches them.
// Update body cell clipping classes. Clipped cells must carry
// the `rt-col-{size_key}` class so the override's `max-width`
// clamp reaches them; under the opt-in `column_classes`
// annotation they already do.
for (const row of this.table_model.body.cells) {
const td = row[virtual_x];
if (td) {
td.classList.toggle("rt-cell-clip", should_clip);
if (should_clip) {
this.table_model.body._tagColumn(td, size_key);
} else {
this.table_model.body._untagColumn(td);
if (!this._column_classes) {
if (should_clip) {
this.table_model.body._tagColumn(td, size_key);
} else {
this.table_model.body._untagColumn(td);
}
}
}
}
Expand Down
31 changes: 21 additions & 10 deletions src/ts/regular-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,23 @@ export class RegularTableElement extends RegularViewEventModel {
this.register_listeners();
this.setAttribute("tabindex", "0");
this._initialized = true;
this.table_model = new RegularTableViewModel(
this._table_clip,
this._column_sizes,
this,
);
this._create_table_model();
}
}

private _create_table_model(): void {
this.table_model?.dispose();
this.table_model = new RegularTableViewModel(
this._table_clip,
this._column_sizes,
this,
);

this.table_model._on_autosize_change = () =>
this._autosize_fill_check();
this.table_model.body._column_classes = this._column_classes;
}

/**
* Reset column autosizing, such that column sizes will be recalculated
* on the next draw() call.
Expand Down Expand Up @@ -113,11 +122,7 @@ export class RegularTableElement extends RegularViewEventModel {
* Clears the current renderer `<table>`.
*/
clear(): void {
this.table_model = new RegularTableViewModel(
this._table_clip,
this._column_sizes,
this,
);
this._create_table_model();
}

/**
Expand Down Expand Up @@ -336,6 +341,7 @@ export class RegularTableElement extends RegularViewEventModel {
{
virtual_mode = "both",
preserve_state = false,
column_classes = false,
}: SetDataListenerOptions = {},
): void {
console.assert(
Expand All @@ -353,6 +359,11 @@ export class RegularTableElement extends RegularViewEventModel {
this._view_cache.view = dataListener as any;
} else {
this._virtual_mode = virtual_mode;
this._column_classes = column_classes;
if (this.table_model) {
this.table_model.body._column_classes = column_classes;
}

this._invalid_schema = true;
this._view_cache = {
view: dataListener as any,
Expand Down
47 changes: 46 additions & 1 deletion src/ts/scroll_panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,8 @@ export class RegularVirtualTableViewModel extends HTMLElement {
protected table_model!: RegularTableViewModel;
protected _style_callbacks!: Array<StyleCallback>;
protected _scroll_pending?: boolean;
protected _num_columns?: number;
protected _column_classes?: boolean;
private _probe_element?: [HTMLElement, HTMLElement];

/**
Expand Down Expand Up @@ -171,13 +173,20 @@ export class RegularVirtualTableViewModel extends HTMLElement {
scroll_left = this.scrollLeft,
scroll_top = this.scrollTop,
container_height = height,
throttle,
} = options;

const noop = (): PredrawCommit =>
Object.assign(() => true, { inline: true });

const inline = async (): Promise<PredrawCommit> => {
await this.draw({ invalid_viewport, preserve_width, cache });
await this.draw({
invalid_viewport,
preserve_width,
cache,
throttle,
});

return noop();
};

Expand Down Expand Up @@ -366,6 +375,7 @@ export class RegularVirtualTableViewModel extends HTMLElement {
}

const dims = await this.table_model._getDimState(this._view_cache);
this._num_columns = dims.num_columns || 0;
this._column_sizes.row_height =
dims.row_height || this._column_sizes.row_height;

Expand Down Expand Up @@ -496,6 +506,41 @@ export class RegularVirtualTableViewModel extends HTMLElement {
return end_col;
}

protected _autosize_fill_check(): void {
if (
this._start_col === undefined ||
this._end_col === undefined ||
!this._view_cache ||
this._virtual_mode === "none" ||
this._virtual_mode === "vertical" ||
this._end_col >= (this._num_columns ?? 0)
) {
return;
}

const { indices, override } = this._column_sizes;
const row_headers_length = this._view_cache.row_headers_length;
let width = 0;
for (let i = 0; i < row_headers_length; i++) {
width += indices[i] || 0;
}

for (let cidx = this._start_col; cidx < this._end_col; cidx++) {
const size_key = row_headers_length + cidx;
const w = override[size_key] ?? indices[size_key];
if (w === undefined) {
return;
}

width += w;
}

const sub_cell_offset = indices[row_headers_length + this._start_col];
if (width - (sub_cell_offset ?? 0) <= this._container_size.width) {
this.draw({ invalid_viewport: true });
}
}

/**
* Probe the shadow DOM to measure the default row height from CSS.
*/
Expand Down
Loading
Loading