` : ''}
`;
- }).join('');
+ });
}
function renderExperiments(runs) {
@@ -1884,14 +1827,14 @@ function renderExperiments(runs) {
return;
}
- list.innerHTML = runs.map(r => {
- const statusColors = {
- pending: '#9a9088', scaffolding: '#a8842a', reproducing: '#2e86ab',
- testing: '#c4704b', completed: '#3d8b5e', failed: '#c4453a'
- };
- const verdictColors = {
- confirmed: '#3d8b5e', refuted: '#c4453a', inconclusive: '#a8842a'
- };
+ const statusColors = {
+ pending: '#9a9088', scaffolding: '#a8842a', reproducing: '#2e86ab',
+ testing: '#c4704b', completed: '#3d8b5e', failed: '#c4453a'
+ };
+ const verdictColors = {
+ confirmed: '#3d8b5e', refuted: '#c4453a', inconclusive: '#a8842a'
+ };
+ renderListChunked(list, runs, r => {
const color = statusColors[r.status] || '#888';
const vColor = verdictColors[r.hypothesis_verdict] || '#888';
@@ -1918,7 +1861,7 @@ function renderExperiments(runs) {
`;
- }).join('');
+ });
}
function experimentStatusColor(status) {
@@ -1967,7 +1910,7 @@ function renderExperimentGroupsV2(groups) {
return;
}
- setListHtmlChunked(list, groups.map(group => {
+ renderListChunked(list, groups, group => {
const insight = group.insight || {};
const auto = group.auto_job || {};
const currentRun = group.canonical_run || group.latest_run || null;
@@ -2028,7 +1971,7 @@ function renderExperimentGroupsV2(groups) {
${previewUrl ? `` : ''}
`;
- }));
+ });
}
function jsonPreview(obj, emptyText = 'None') {
@@ -2194,31 +2137,40 @@ function runWhenIdle(fn, timeout = 700) {
}
}
-// Render a large list of pre-built HTML strings without janking the main
-// thread. A single `container.innerHTML = parts.join('')` of a few hundred
-// complex cards parses/builds the whole subtree in one ~hundreds-of-ms task;
-// during the idle prefetch several such renders ran back-to-back and made the
-// page feel frozen. Here we drop the first chunk in synchronously (so the tab
-// is not empty) and append the rest across idle callbacks. insertAdjacentHTML
-// only parses the appended slice, so total work stays O(n) — never the O(n^2)
-// of `innerHTML +=`. Items use inline onclick handlers, so no post-render
-// event binding is needed.
-function setListHtmlChunked(container, parts, chunk = 25) {
+// Render a large list of cards without janking the main thread. A single
+// `container.innerHTML = items.map(renderItem).join('')` does TWO O(n) bursts of
+// work in one synchronous task: it builds every card's HTML string (often
+// parsing several JSON fields per row — the production /api/deep_insights and
+// /api/insights payloads are ~0.6–0.7 MB) AND parses the whole subtree into the
+// DOM. On real data that single task ran into the hundreds of ms. Here we build
+// AND insert one chunk at a time: the first chunk synchronously (so the tab is
+// never empty), the rest across idle callbacks. Each step is O(chunk), so no
+// step is a long task, and insertAdjacentHTML only parses the appended slice so
+// total work stays O(n) — never the O(n²) of `innerHTML +=`. `renderItem(item,
+// i)` returns the card HTML; items use inline onclick handlers, so no
+// post-render event binding is needed.
+function renderListChunked(container, items, renderItem, chunk = 25) {
container.innerHTML = '';
- if (!parts || !parts.length) return;
+ if (!items || !items.length) return;
// Cancel any still-pending chunked render of an earlier call (e.g. when a
// filter re-renders the same list before the previous run finished).
const token = (container._chunkToken || 0) + 1;
container._chunkToken = token;
- container.insertAdjacentHTML('beforeend', parts.slice(0, chunk).join(''));
+ const buildSlice = (start) => {
+ let html = '';
+ const end = Math.min(start + chunk, items.length);
+ for (let i = start; i < end; i++) html += renderItem(items[i], i);
+ return html;
+ };
+ container.insertAdjacentHTML('beforeend', buildSlice(0));
let i = chunk;
const step = () => {
if (container._chunkToken !== token) return; // superseded
- container.insertAdjacentHTML('beforeend', parts.slice(i, i + chunk).join(''));
+ container.insertAdjacentHTML('beforeend', buildSlice(i));
i += chunk;
- if (i < parts.length) runWhenIdle(step, 50);
+ if (i < items.length) runWhenIdle(step, 50);
};
- if (i < parts.length) runWhenIdle(step, 50);
+ if (i < items.length) runWhenIdle(step, 50);
}
async function prefetchInactiveTabs() {