Skip to content

Fix O(n) performance bottleneck in diff computation for large filter lists #41

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
jaypatrick merged 2 commits into from
Jan 4, 2026
Merged

Fix O(n) performance bottleneck in diff computation for large filter lists #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e88b04a
Initial plan
Copilot Jan 4, 2026
1abe17c
Fix severe performance issue in diff computation for multiple sources
Copilot Jan 4, 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
31 changes: 10 additions & 21 deletions examples/cloudflare-worker/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -763,10 +763,6 @@ <h3>Compilation Results</h3>
<h4>📊 Changes from Cached Version</h4>
<div class="diff-stats" id="diff-stats"></div>
</div>
<div class="diff-toggle">
<input type="checkbox" id="show-unchanged" />
<label for="show-unchanged">Show unchanged lines</label>
</div>
<div class="diff-container" id="diff-container"></div>
</div>

Expand Down Expand Up @@ -1156,28 +1152,29 @@ <h4>📊 Changes from Cached Version</h4>

const removed = oldRules.filter(rule => !newSet.has(rule));
const added = newRules.filter(rule => !oldSet.has(rule));
const unchanged = newRules.filter(rule => oldSet.has(rule));
// Don't compute the full unchanged array - it's expensive for large lists
// We only need the count, which can be derived: unchanged = total - added
const unchangedCount = newRules.length - added.length;

return { added, removed, unchanged };
return { added, removed, unchangedCount };
}

function showDiff(oldRules, newRules, compiledAt) {
const diffSection = document.getElementById('diff-section');
const diffStats = document.getElementById('diff-stats');
const diffContainer = document.getElementById('diff-container');
const showUnchangedCheckbox = document.getElementById('show-unchanged');

const diff = computeDiff(oldRules, newRules);

// Update stats
diffStats.innerHTML = `
<span class="diff-stat-added">+${diff.added.length} added</span>
<span class="diff-stat-removed">-${diff.removed.length} removed</span>
<span class="diff-stat-unchanged">${diff.unchanged.length} unchanged</span>
<span class="diff-stat-unchanged">${diff.unchangedCount} unchanged</span>
`;

// Render diff
function renderDiff(showUnchanged) {
function renderDiff() {
const lines = [];

// Show removed lines
Expand All @@ -1196,24 +1193,16 @@ <h4>📊 Changes from Cached Version</h4>
lines.push(`<div class="diff-line diff-line-added"><span class="diff-line-symbol">...</span>and ${diff.added.length - 200} more added</div>`);
}

// Optionally show unchanged lines (sample)
if (showUnchanged) {
diff.unchanged.slice(0, 50).forEach(rule => {
lines.push(`<div class="diff-line diff-line-unchanged"><span class="diff-line-symbol"> </span>${escapeHtml(rule)}</div>`);
});
if (diff.unchanged.length > 50) {
lines.push(`<div class="diff-line diff-line-unchanged"><span class="diff-line-symbol">...</span>and ${diff.unchanged.length - 50} more unchanged</div>`);
}
// Show summary of unchanged rules (we don't render them individually for performance)
if (diff.unchangedCount > 0) {
lines.push(`<div class="diff-line diff-line-unchanged"><span class="diff-line-symbol"> </span>${diff.unchangedCount} rules unchanged</div>`);
}

diffContainer.innerHTML = lines.length > 0 ? lines.join('') : '<div class="diff-line">No changes detected</div>';
}

// Initial render
renderDiff(showUnchangedCheckbox.checked);

// Toggle unchanged lines
showUnchangedCheckbox.onchange = () => renderDiff(showUnchangedCheckbox.checked);
renderDiff();

// Show section
diffSection.style.display = 'block';
Expand Down
31 changes: 10 additions & 21 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -818,10 +818,6 @@ <h3>Compilation Results</h3>
<h4>📊 Changes from Cached Version</h4>
<div class="diff-stats" id="diff-stats"></div>
</div>
<div class="diff-toggle">
<input type="checkbox" id="show-unchanged" />
<label for="show-unchanged">Show unchanged lines</label>
</div>
<div class="diff-container" id="diff-container"></div>
</div>

Expand Down Expand Up @@ -1266,28 +1262,29 @@ <h4>📊 Changes from Cached Version</h4>

const removed = oldRules.filter(rule => !newSet.has(rule));
const added = newRules.filter(rule => !oldSet.has(rule));
const unchanged = newRules.filter(rule => oldSet.has(rule));
// Don't compute the full unchanged array - it's expensive for large lists
// We only need the count, which can be derived: unchanged = total - added
const unchangedCount = newRules.length - added.length;

return { added, removed, unchanged };
return { added, removed, unchangedCount };
}

function showDiff(oldRules, newRules, compiledAt) {
const diffSection = document.getElementById('diff-section');
const diffStats = document.getElementById('diff-stats');
const diffContainer = document.getElementById('diff-container');
const showUnchangedCheckbox = document.getElementById('show-unchanged');

const diff = computeDiff(oldRules, newRules);

// Update stats
diffStats.innerHTML = `
<span class="diff-stat-added">+${diff.added.length} added</span>
<span class="diff-stat-removed">-${diff.removed.length} removed</span>
<span class="diff-stat-unchanged">${diff.unchanged.length} unchanged</span>
<span class="diff-stat-unchanged">${diff.unchangedCount} unchanged</span>
`;

// Render diff
function renderDiff(showUnchanged) {
function renderDiff() {
const lines = [];

// Show removed lines
Expand All @@ -1306,24 +1303,16 @@ <h4>📊 Changes from Cached Version</h4>
lines.push(`<div class="diff-line diff-line-added"><span class="diff-line-symbol">...</span>and ${diff.added.length - 200} more added</div>`);
}

// Optionally show unchanged lines (sample)
if (showUnchanged) {
diff.unchanged.slice(0, 50).forEach(rule => {
lines.push(`<div class="diff-line diff-line-unchanged"><span class="diff-line-symbol"> </span>${escapeHtml(rule)}</div>`);
});
if (diff.unchanged.length > 50) {
lines.push(`<div class="diff-line diff-line-unchanged"><span class="diff-line-symbol">...</span>and ${diff.unchanged.length - 50} more unchanged</div>`);
}
// Show summary of unchanged rules (we don't render them individually for performance)
if (diff.unchangedCount > 0) {
lines.push(`<div class="diff-line diff-line-unchanged"><span class="diff-line-symbol"> </span>${diff.unchangedCount} rules unchanged</div>`);
}

diffContainer.innerHTML = lines.length > 0 ? lines.join('') : '<div class="diff-line">No changes detected</div>';
}

// Initial render
renderDiff(showUnchangedCheckbox.checked);

// Toggle unchanged lines
showUnchangedCheckbox.onchange = () => renderDiff(showUnchangedCheckbox.checked);
renderDiff();

// Show section
diffSection.style.display = 'block';
Expand Down