Act as a senior frontend performance engineer. Build The Frontend Memory Leak Experiment Studio, an interactive educational tool that demonstrates how common application patterns can cause memory to grow unnecessarily.
Create simulated frontend components that can mount, update, and unmount while registering timers, event listeners, subscriptions, cached objects, and retained references.
The application should:
Demonstrate correct cleanup versus intentionally faulty cleanup.
Display simulated resource counts across repeated component lifecycle cycles.
Show how retained references prevent objects from becoming collectible in the model.
Compare faulty and corrected implementations.
Allow users to modify cleanup behavior and rerun experiments.
Generate a lifecycle timeline and resource-growth chart.
Provide annotated code examples for supported scenarios.
Explain what browser memory tools can and cannot confirm.
Export experiment configurations and observations.
Include examples for event listeners, intervals, subscriptions, and unbounded caches. Keep simulated memory measurements clearly labeled and never fabricate real heap measurements. Where browser profiling is available in the implementation environment, make it a separate optional demonstration. Build a responsive, interactive lab with repeatable experiments.
0 Comments