From b6e7b3e359b2ffe54e40fbbe282e5cd948402afb Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Tue, 18 Aug 2026 14:06:21 +0000 Subject: [PATCH] perf: optimize loop performance in computeTaskMetrics Replaced Array.prototype.reduce and forEach with standard for loops and Int32Array to eliminate JS engine overhead (callback allocation, garbage collection, and map lookups) during hot metric calculations. --- .jules/bolt.md | 3 +++ app.js | 25 +++++++++++++++---------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/.jules/bolt.md b/.jules/bolt.md index b08b203a..4140d250 100644 --- a/.jules/bolt.md +++ b/.jules/bolt.md @@ -4,3 +4,6 @@ ## 2026-07-12 - Optimize renderTaskRow DOM allocations **Learning:** Caching unattached template nodes and instantiating them via `.cloneNode(false)` reduces DOM instantiation overhead in O(N) render loops significantly. **Action:** Apply this optimization to other hot-path rendering elements such as rows, cells, and stack containers. +## 2026-08-18 - Optimize loop performance by replacing reduce/forEach with standard loops and Int32Array +**Learning:** Using `Array.prototype.reduce`/`forEach` and `Map` incurs significant callback allocation, hash-lookup overhead, and garbage collection pauses in hot O(N) rendering paths. +**Action:** Replace high-frequency mapping/reductions with standard `for` loops and typed arrays (like `Int32Array`) to bypass JavaScript engine overhead. diff --git a/app.js b/app.js index a04aae71..8e5efd71 100644 --- a/app.js +++ b/app.js @@ -1370,21 +1370,26 @@ function validateDateRange(startLabel, startValue, endLabel, endValue, errors) { } function computeTaskMetrics() { - // ⚡ Bolt: Cache durationDays during total calculation to avoid recalculating for every task - const durationCache = new Map(); - const totalDays = state.tasks.reduce((sum, task) => { - const duration = calculateDurationDays(task.plannedStartDate, task.plannedEndDate); - durationCache.set(task.id, duration); - return sum + duration; - }, 0); + // ⚡ Bolt: Use Int32Array and standard for-loops instead of Map and Array.reduce/forEach + // to eliminate JS callback allocation, Map hash-lookups, and garbage collection overhead. + const numTasks = state.tasks.length; + const durations = new Int32Array(numTasks); + let totalDays = 0; + + for (let i = 0; i < numTasks; i++) { + const duration = calculateDurationDays(state.tasks[i].plannedStartDate, state.tasks[i].plannedEndDate); + durations[i] = duration; + totalDays += duration; + } const baseDate = state.baseDate; const byTask = new Map(); let totalWeightedPlannedRatio = 0; let totalWeightedActualRatio = 0; - state.tasks.forEach((task) => { - const durationDays = durationCache.get(task.id); + for (let i = 0; i < numTasks; i++) { + const task = state.tasks[i]; + const durationDays = durations[i]; const weightRatio = totalDays > 0 ? durationDays / totalDays : 0; const plannedProgressRatio = calculatePlannedProgressRatio(baseDate, task.plannedStartDate, task.plannedEndDate, durationDays); const actualProgressRatio = (ACTUAL_PROGRESS_MAP[task.actualProgressStatus] || 0) / 100; @@ -1408,7 +1413,7 @@ function computeTaskMetrics() { plannedDateWarning, actualDateWarning }); - }); + } return { totalDays,