Skip to content

perf(highlight): cut tab init from ~20s to ~5s on heavy pages #63

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
softpudding merged 4 commits into from
Apr 18, 2026
Merged

perf(highlight): cut tab init from ~20s to ~5s on heavy pages #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
85dd4f7
perf(highlight): cache layout reads + spatial-index pagination
softpudding Apr 17, 2026
9e9cc02
perf(highlight): cache resolve-phase classifiers + emit perf breakdown
softpudding Apr 17, 2026
e8268a8
set extension auto reload timeout to 40s
softpudding Apr 18, 2026
6aac696
chore: apply pre-commit formatting (prettier) on highlight perf changes
softpudding Apr 18, 2026
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
24 changes: 19 additions & 5 deletions extension/src/background/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -583,7 +583,11 @@ async function captureHighlightedPageState(
: '';
const detectedViewport = detectionResult.result.value.viewport || {};
const layoutStability = detectionResult.result.value.layoutStability;
const inPagePerf = detectionResult.result.value._perf || {};
const highlightTraceStart = Date.now();
let paginationMs = 0;
let screenshotMs = 0;
let consistencyMs = 0;
const detectedViewportWidth =
typeof detectedViewport.width === 'number' ? detectedViewport.width : 0;
const detectedViewportHeight =
Expand Down Expand Up @@ -656,8 +660,9 @@ async function captureHighlightedPageState(
console.log(
`📄 [${logLabel}] Page ${page}/${totalPages}, showing ${paginatedElements.length} of ${filteredElements.length} elements`,
);
paginationMs = Date.now() - paginationBuildStart;
console.log(
`⏱️ [HighlightTrace] background pagination build-pages=${Date.now() - paginationBuildStart}ms (page=${page}, viewport=${detectedViewportWidth}x${detectedViewportHeight})`,
`⏱️ [HighlightTrace] background pagination build-pages=${paginationMs}ms (page=${page}, viewport=${detectedViewportWidth}x${detectedViewportHeight})`,
);
}

Expand Down Expand Up @@ -702,9 +707,8 @@ async function captureHighlightedPageState(
console.log(
`📸 [${logLabel}] Screenshot captured (with in-page highlights), size: ${screenshotResult.imageData.length} bytes`,
);
console.log(
`⏱️ [HighlightTrace] background screenshot ${Date.now() - screenshotStart}ms`,
);
screenshotMs = Date.now() - screenshotStart;
console.log(`⏱️ [HighlightTrace] background screenshot ${screenshotMs}ms`);

// Apply bboxes returned from the highlight injection script
const preCaptureData = screenshotResult.preCaptureResult;
Expand Down Expand Up @@ -766,8 +770,9 @@ async function captureHighlightedPageState(
})),
currentConsistencySamples,
);
consistencyMs = Date.now() - consistencyCheckStart;
console.log(
`⏱️ [HighlightTrace] background consistency-check ${Date.now() - consistencyCheckStart}ms (checked=${highlightConsistency.checkedCount}, matched=${highlightConsistency.matchedCount}, missing=${highlightConsistency.missingCount}, shifted=${highlightConsistency.shiftedCount}, maxCenterShift=${highlightConsistency.maxCenterShift}, maxSizeDelta=${highlightConsistency.maxSizeDelta}, retry=${highlightConsistency.shouldRetry})`,
`⏱️ [HighlightTrace] background consistency-check ${consistencyMs}ms (checked=${highlightConsistency.checkedCount}, matched=${highlightConsistency.matchedCount}, missing=${highlightConsistency.missingCount}, shifted=${highlightConsistency.shiftedCount}, maxCenterShift=${highlightConsistency.maxCenterShift}, maxSizeDelta=${highlightConsistency.maxSizeDelta}, retry=${highlightConsistency.shouldRetry})`,
);
const repeatedDrift = isRepeatedHighlightDrift(
highlightConsistency,
Expand Down Expand Up @@ -841,6 +846,15 @@ async function captureHighlightedPageState(
page: currentPage,
pageState,
readinessReasons,
_perf: {
scan_ms:
typeof inPagePerf.scan_ms === 'number' ? inPagePerf.scan_ms : 0,
scan_stats: inPagePerf.scan_stats || {},
scan_times: inPagePerf.scan_times || {},
pagination_ms: paginationMs,
screenshot_ms: screenshotMs,
consistency_ms: consistencyMs,
},
...buildScreenshotPayload(compressedScreenshotResult),
};
}
Expand Down
Loading
Loading