frontend-js-performance

What problem does it solve?

Many front-end JavaScript codebases suffer from avoidable runtime slowdowns caused by layout thrashing, repeated O(n) lookups, unnecessary array iterations, expensive synchronous storage reads, and repeated RegExp or function allocations. This Skill distills practical patterns to detect and prevent these common performance pitfalls so UI interactions feel snappy and resource usage stays low.

Core Features & Use Cases

• Batch DOM reads/writes to avoid forced synchronous reflows and reduce layout thrashing in interactive components.
• Index Maps and Sets for O(1) repeated lookups instead of repeated find/includes operations.
• Caching strategies for function results and storage API reads, with examples for cookie and localStorage synchronization and invalidation.
• Loop and iteration optimizations including combining multiple passes, early returns, and O(n) min/max scans instead of sorting.
• RegExp hoisting and immutability practices and guidance on using immutable array helpers like toSorted to avoid React bugs.
• Use Case: Improve rendering and event-handling performance in a React app by batching style changes, replacing repeated array searches with Maps, and caching localStorage reads.

Quick Start

Ask the skill to analyze a front-end file and recommend concrete changes to eliminate layout thrashing, replace repeated lookups with Maps/Sets, cache expensive calls, and reduce unnecessary array iterations.