Performance, Memory, and Efficient Rendering

Performance work should start with measurement. A slow page may be caused by a network request, large assets, excessive DOM work, expensive computation, or repeated rendering. Use the browser's Performance panel and network tools to identify the actual bottleneck before rewriting code.

Avoid unnecessary work#

For large lists, avoid repeated expensive operations inside nested loops when a map or set can provide a clearer lookup. Use appropriate data structures, cache results only when the invalidation rules are understood, and avoid premature memoization.

Memory and references#

Garbage collection can reclaim objects that are no longer reachable. Long-lived listeners, timers, global collections, and closures can keep objects reachable. Remove listeners when their component or UI is discarded, clear timers that are no longer needed, and avoid retaining large data unnecessarily.

Browser responsiveness#

Long synchronous tasks block interaction on the main thread. Break up expensive work or move suitable computation into a Web Worker. Avoid repeatedly forcing layout by alternating DOM writes and layout reads in large loops.

Network performance#

Reduce unnecessary requests, compress and appropriately size assets, cache responses where safe, and display loading states. Performance improvements should not compromise correctness, accessibility, privacy, or security.

Practice#

Use the Performance panel to profile a simple page before changing it. Identify one real bottleneck, make a targeted improvement, and compare before/after measurements.