From a717d27afaaeb26db6ed6b76f0d61c83c8d69693 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 17 Jul 2026 14:08:32 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9A=A1=20Bolt:=20Gantt=20=EC=B0=A8?=
 =?UTF-8?q?=ED=8A=B8=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=84=B1=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `document.createElement`를 여러 번 반복 호출하는 O(N) DOM 생성 루프를 개선하기 위해 `cloneNode(false)`를 활용하여 정적 템플릿 요소를 복제하는 방식을 도입했습니다. 이를 통해 JS-to-C++ 간의 메모리 할당 및 가비지 컬렉션 부하를 크게 줄였습니다.
- 관련 함수: `createGanttMetaTable`, `createGanttChartTable`
---
 .jules/bolt.md |  3 +++
 app.js         | 31 ++++++++++++++++++++++++++-----
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/.jules/bolt.md b/.jules/bolt.md
index b08b203a..315412ef 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-07-17 - Optimize Gantt Chart Rendering
+**Learning:** O(N) loops creating multiple DOM nodes via document.createElement causes significant JS-to-C++ allocation overhead.
+**Action:** When creating thousands of elements like in gantt chart cells or rows, cache static templates utilizing cloneNode() instead of dynamically creating elements.
diff --git a/app.js b/app.js
index b8c62279..1a5d677c 100644
--- a/app.js
+++ b/app.js
@@ -2315,6 +2315,11 @@ function renderGantt() {
   elements.ganttContent.replaceChildren(shell);
 }
 
+// ⚡ Bolt: Cache template elements for Gantt rendering loops
+let ganttRowTemplate = null;
+let ganttChartCellTemplate = null;
+let ganttChartTrackTemplate = null;
+
 function createGanttMetaTable() {
   const table = document.createElement('table');
   const thead = document.createElement('thead');
@@ -2340,8 +2345,13 @@ function createGanttMetaTable() {
   thead.appendChild(headerRow);
 
   const tbody = document.createElement('tbody');
+
+  if (!ganttRowTemplate) {
+    ganttRowTemplate = document.createElement('tr');
+  }
+
   state.tasks.forEach((task) => {
-    const row = document.createElement('tr');
+    const row = ganttRowTemplate.cloneNode(false);
     row.append(
       createTableCell('', createTreeCellContent(task.phase || task.activity || task.task || '-', task.depth)),
       createTableCell('', createTextCellContent(task.activity)),
@@ -2385,13 +2395,24 @@ function createGanttChartTable(weeks, weekdays, totalWidth) {
   thead.append(weekRow, dayRow);
 
   const tbody = document.createElement('tbody');
+
+  if (!ganttRowTemplate) {
+    ganttRowTemplate = document.createElement('tr');
+  }
+  if (!ganttChartCellTemplate) {
+    ganttChartCellTemplate = document.createElement('td');
+  }
+  if (!ganttChartTrackTemplate) {
+    ganttChartTrackTemplate = document.createElement('div');
+    ganttChartTrackTemplate.className = 'gantt-day-track';
+  }
+
   state.tasks.forEach((task) => {
-    const row = document.createElement('tr');
-    const cell = document.createElement('td');
+    const row = ganttRowTemplate.cloneNode(false);
+    const cell = ganttChartCellTemplate.cloneNode(false);
     cell.colSpan = weekdays.length;
 
-    const track = document.createElement('div');
-    track.className = 'gantt-day-track';
+    const track = ganttChartTrackTemplate.cloneNode(false);
     track.style.width = `${totalWidth}px`;
 
     const planBar = createGanttBarElement(task.plannedStartDate, task.plannedEndDate, weekdays, 'plan', task);

From f71d3b81320788c20a652b68f6a0866acc379fae Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 17 Jul 2026 14:16:32 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9A=A1=20Bolt:=20Gantt=20=EC=B0=A8?=
 =?UTF-8?q?=ED=8A=B8=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=84=B1=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `document.createElement`를 여러 번 반복 호출하는 O(N) DOM 생성 루프를 개선하기 위해 `cloneNode(false)`를 활용하여 정적 템플릿 요소를 복제하는 방식을 도입했습니다. 이를 통해 JS-to-C++ 간의 메모리 할당 및 가비지 컬렉션 부하를 크게 줄였습니다.
- 관련 함수: `createGanttMetaTable`, `createGanttChartTable`