diff --git a/.jules/bolt.md b/.jules/bolt.md index b08b203a..14288179 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-26 - Inline ternary concatenation vs String.padStart() +**Learning:** Using `String.prototype.padStart()` in hot loops (like date formatters inside O(N) chart rendering loops) causes unnecessary string allocations and JavaScript-to-C++ boundary crossings, increasing Garbage Collection pressure and degrading performance compared to inline ternary concatenation (`m < 10 ? '0' + m : m`). +**Action:** Prefer using inline ternary string concatenation for zero-padding short, bounded integers (e.g. months, days) in performance-critical hot loops instead of `String.prototype.padStart()`. diff --git a/app.js b/app.js index a04aae71..d90e76bf 100644 --- a/app.js +++ b/app.js @@ -2682,22 +2682,31 @@ function clamp(value, min, max) { return Math.min(max, Math.max(min, value)); } +// ⚡ Bolt: Use inline ternary concatenation instead of String.padStart() for hot loop date formatters function formatDateInput(date) { const year = date.getUTCFullYear(); - const month = String(date.getUTCMonth() + 1).padStart(2, '0'); - const day = String(date.getUTCDate()).padStart(2, '0'); + const m = date.getUTCMonth() + 1; + const d = date.getUTCDate(); + const month = m < 10 ? '0' + m : m; + const day = d < 10 ? '0' + d : d; return `${year}-${month}-${day}`; } function formatLocalDateInput(date) { const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, '0'); - const day = String(date.getDate()).padStart(2, '0'); + const m = date.getMonth() + 1; + const d = date.getDate(); + const month = m < 10 ? '0' + m : m; + const day = d < 10 ? '0' + d : d; return `${year}-${month}-${day}`; } function formatCompactDate(date) { - return `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}`; + const m = date.getMonth() + 1; + const d = date.getDate(); + const month = m < 10 ? '0' + m : m; + const day = d < 10 ? '0' + d : d; + return `${date.getFullYear()}${month}${day}`; } function formatPercent(value, digits) { diff --git a/index.html b/index.html index d24b2a88..acce6789 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ ScopeWeave Planner + + diff --git a/perf_test.cjs b/perf_test.cjs new file mode 100644 index 00000000..322407a1 --- /dev/null +++ b/perf_test.cjs @@ -0,0 +1,37 @@ +const { performance } = require('perf_hooks'); + +function formatDateInput_pad(date) { + const year = date.getUTCFullYear(); + const month = String(date.getUTCMonth() + 1).padStart(2, '0'); + const day = String(date.getUTCDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; +} + +function formatDateInput_ternary(date) { + const year = date.getUTCFullYear(); + const m = date.getUTCMonth() + 1; + const d = date.getUTCDate(); + const month = m < 10 ? '0' + m : m; + const day = d < 10 ? '0' + d : d; + return `${year}-${month}-${day}`; +} + +const dates = Array.from({length: 10000}, () => new Date(Date.now() - Math.random() * 10000000000)); + +let start = performance.now(); +for(let i=0; i<100; i++) { + for(const date of dates) { + formatDateInput_pad(date); + } +} +let end = performance.now(); +console.log(`padStart: ${end - start}ms`); + +start = performance.now(); +for(let i=0; i<100; i++) { + for(const date of dates) { + formatDateInput_ternary(date); + } +} +end = performance.now(); +console.log(`ternary: ${end - start}ms`);