Skip to content
Browse files
Web Inspector: Search tab should lazily insert/remove its navigation …
…sidebar tree items during scrolling

Reviewed by Devin Rousso.

Improve performance of the Search tab by virtualizing the navigation tree outline, which allows us to reduce the number
of DOM elements that are attached to the DOM at any given point.

This accounts for about 50% of the performance improvements that have taken searching for the letter `a` on
from ~13 seconds to under a second (using manual stopwatch testing across 5 tests before and after). The other 50% of
the improvement is from bug 242450 (Web Inspector: Lazily create SourceCodeTextRange for search result objects). Note
that very large sites still pose a problem, but instrumenting search performance has been tricky because they lock up
and never return performance/timing data.

* Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.js:

Canonical link:
  • Loading branch information
patrickangle committed Jul 8, 2022
1 parent e2167a1 commit 0ccc6a9965768cb5debb504c711f0c3bd9b3e0fe
Showing 1 changed file with 2 additions and 0 deletions.
@@ -55,6 +55,8 @@ WI.SearchSidebarPanel = class SearchSidebarPanel extends WI.NavigationSidebarPan

WI.Frame.addEventListener(WI.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);

const treeItemHeight = 20;
this.contentTreeOutline.registerScrollVirtualizer(this.contentView.element, treeItemHeight);
this.contentTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);

0 comments on commit 0ccc6a9

Please sign in to comment.