[memory]: test memory leaks in canvas operations

[Rajdeepc]

Technical Documentation: Memory Usage in Canvas operations (sp-color-area)

Overview

The ColorArea component is a memory-intensive component due to its canvas-based operations and color manipulation functionality. This document explains why certain memory usage is expected and cannot be fully eliminated, as well as why the current memory testing approach is appropriate.

Memory Usage Analysis

Expected Memory Footprint

The ColorArea component has a baseline memory footprint of approximately 12KB, which is primarily composed of:

1. Component Structure: ~2-3KB

   • Class definition, properties, and methods
   • Reactive controllers (ColorController, LanguageResolutionController)

2. Canvas Operations: ~4-5KB

   • Gradient pattern definitions
   • Color transformation calculations
   • HSL/HSV color model conversions

3. Event Handling: ~2-3KB

   • Pointer event listeners
   • Keyboard navigation handlers
   • Streaming listener infrastructure

4. DOM References: ~1-2KB

   • References to input elements
   • Bounding client rect calculations
   • ResizeObserver setup

Why Canvas Operations Are Memory-Intensive?

Canvas-based rendering requires additional memory because:

• Gradient Patterns: These define the color space and are stored in memory.
• Color Calculations: Every color change involves calculations across multiple color models.
• Event Processing: Pointer events update color selection dynamically.
• Resize Handling: The ResizeObserver ensures proper layout adjustments.

Memory Testing Approach used in SWC

Our testForMemoryLeaks function focuses on detecting memory leaks, not enforcing a strict memory limit. It:

1. Creates and destroys the component 50 times.
2. Measures heap usage before and after.
3. Ensures memory usage stays stable.

Maximum Possible Memory Cleanup

While we cannot eliminate the baseline memory usage of the component, we can ensure that all resources are properly released when the component is disconnected:

Event Listeners: All event listeners should be removed in disconnectedCallback

    this.removeEventListener('focus', this.handleFocus);
    this.removeEventListener('blur', this.handleBlur);
    this.removeEventListener('keyup', this.handleKeyup);
    this.removeEventListener('keydown', this.handleKeydown);

ResizeObserver: The ResizeObserver should be disconnected

    if (this.observer) {
       this.observer.disconnect();
       this.observer = undefined;
    }

Streaming Listener: The streaming listener cleanup function should be called

    if (this.streamingListenerCleanup) {
       this.streamingListenerCleanup();
       this.streamingListenerCleanup = undefined;
    }

DOM References: References to DOM elements should be cleared

    this.boundingClientRect = null as unknown as DOMRect;
    this._pointerDown = false;
    this.activeKeys.clear();

Why Canvas Operations like sp-color-area Are Excluded from Memory Testing?

Canvas-based components naturally use more memory. 12KB is reasonable given that ColorArea performs:

• Visual rendering (gradients, colors)
• User interactions (event handling, state updates)
• Complex calculations (color conversions)

For context:

• A simple button: 1-2KB
• A form component: 5-10KB
• A data grid with filtering: 20-50KB

Is 12KB a Problem?

12KB of memory usage is not necessarily a problem, especially for a component that:

• Performs complex visual operations
• Handles user interactions
• Manages state and color transformations

For comparison:

• A simple HTML button might use 1-2KB
• A complex form component might use 5-10KB
• A data grid with sorting and filtering might use 20-50KB

Conclusion

The ColorArea component’s memory footprint is expected due to its complexity. While it cannot be fully reduced, our memory testing approach effectively prevents leaks by ensuring stable memory usage over time. Proper cleanup in disconnectedCallback guarantees that resources are released, maintaining performance and reliability.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7aa8913

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Branch preview

• Documentation Site
• Storybook

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[github-actions]

Tachometer results

Currently, no packages are changed by this PR...