perf: migrate find highlights to CSS Highlight API#751
Open
lukecotter wants to merge 10 commits intocertinia:mainfrom
Open
perf: migrate find highlights to CSS Highlight API#751lukecotter wants to merge 10 commits intocertinia:mainfrom
lukecotter wants to merge 10 commits intocertinia:mainfrom
Conversation
Prevents Chrome's scroll anchoring from double-compensating when the virtual DOM renderer adjusts padding during scroll-up, which caused visible content drift.
will-change: transform promotes the scroll container to a compositor layer for GPU-accelerated scrolling. content-visibility: auto skips rendering off-screen table content.
Replace DOM-based find/match highlighting (span insertion with .findMatch/.currentFindMatch classes) with the CSS Highlight API. Uses shared Highlight objects with per-instance Range tracking, rAF-throttled scroll listener for virtual scroll, and ::highlight() pseudo-elements for styling.
Return a Promise from goToRow for async coordination. Use scrollIntoView as fallback after tabulator's scrollToRow to handle edge cases near the bottom of the grid. Check element connectivity in _isVisible and compare against tableholder bounds instead of window.
The two setTimeout wrappers in goToRow and _scrollToRow were deferring execution unnecessarily — goToRow now calls _scrollToRow directly, and _scrollToRow resolves synchronously after scrollIntoView rather than deferring to the next tick.
Extracts the inline name formatter into CalltreeNameFormatter.ts using a
factory/closure pattern. Key hot-path improvements: replaces
createElement('span') with document.createTextNode() (no element allocation
for plain text rows), eliminates private row._row.modules.dataTree access by
computing treeLevel once in _toCallTree and storing it in row data, and reads
dataTreeChildIndent via this.table on first render only.
Replace scrollIntoView with \_centerRow that restores vDomBottomPad before setting scrollTop via offsetTop. Tabulator's \_addBottomRow zeroes vDomBottomPad when vDomBottom reaches the last row index — even for mid-table rows — shrinking scrollHeight and preventing center alignment. Also refactor \_scrollToRow to async/await.
… API Replace per-cell DOM-based highlighting with CSS Highlight API ranges, eliminating row.reformat() calls during search. Extract searchable text via headless formatter execution with a reusable mock cell and per-row cache, bypassing getCells() and its O(rows × cols) DOM element creation. Skip innerHTML parsing for non-HTML formatter results. Highlight ranges now span across adjacent text nodes for cross-element match support.
Eliminates innerHTML parsing in Find search by returning DOM elements directly. _runFormatterForColumn now reads .textContent instead of parsing HTML via innerHTML for every progress column cell.
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
1 participant
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.
📝 PR Overview
Migrates the Find module's text highlighting from DOM-manipulating
<span>elements to the CSS Custom Highlight API. This eliminates DOM mutations during search, enabling up to 10x faster search on large logs and fixing scroll-to-row centering issues caused by extra DOM elements.🛠️ Changes made
<span>elements for matchesHTMLElementconstructionsetTimeoutdeferralscontain,will-change) for smoother tabulator scrolling🧩 Type of change (check all applicable)
🔗 Related Issues
resolves #627
✅ Tests added?
📚 Docs updated?