Skip to content

Batch canvas rendering using stageDirty flag to reduce redundant stage.update() calls#5807

Merged
walterbender merged 3 commits intosugarlabs:masterfrom
stutijain2006:PerformanceIssues1
Mar 15, 2026
Merged

Batch canvas rendering using stageDirty flag to reduce redundant stage.update() calls#5807
walterbender merged 3 commits intosugarlabs:masterfrom
stutijain2006:PerformanceIssues1

Conversation

@stutijain2006
Copy link
Contributor

This PR improves runtime rendering efficiency by reducing unnecessary stage.update() calls and switching to a batched rendering approach using a stageDirty flag.

Instead of triggering immediate canvas redraws from multiple event handlers (keyboard movement, resizing, idle wake-up, scrolling, etc.), we now:

  • Mark the stage as dirty (stageDirty = true)
  • Allow the centralized render loop to perform the actual stage.update() once per frame

This avoids redundant synchronous canvas redraws and reduces scripting overhead on the main thread.

Changes made -
Replaced direct stage.update() calls with stageDirty = true in:

  • _doLargerBlocks()
  • _doSmallerBlocks()
  • resetIdleTimer()
  • Multiple branches inside __keyPressed()

This ensures one canvas redraw per frame and no redundant forced synchronous updates.

Performance Changes -
This is a runtime efficiency optimization, not a Lighthouse score booster.

Before-

  • 1st party main thread time: ~300 ms
  • Total scripting time: ~635 ms
  • Total timeline window: ~12.1 s
Screenshot 2026-02-19 123317

After-

  • 1st party main thread time: ~182 ms
  • Total scripting time: ~469 ms
  • Total timeline window: ~10.2 s
Screenshot 2026-02-19 124045

Result-

  • ~26% reduction in main-thread time (1st party)
  • ~160 ms reduction in scripting work
  • Fewer forced synchronous canvas redraws

Functional Verification-
All core interactions were manually tested:

  • Block movement via keyboard
  • Palette scrolling
  • Block resizing
  • Play / Stop
  • Idle wake-up behavior
    All functionality remains unchanged.

@github-actions
Copy link
Contributor

✅ All Jest tests passed! This PR is ready to merge.

@omsuneri
Copy link
Member

@stutijain2006 please resolve the linting issue

@github-actions
Copy link
Contributor

✅ All Jest tests passed! This PR is ready to merge.

@stutijain2006
Copy link
Contributor Author

@stutijain2006 please resolve the linting issue

I even did forced formatting now so that the lint error doesn't appear, but don't know why it is coming, can you guide me for the same ?

@kartikktripathi
Copy link
Contributor

This might be because of different prettier versions used by your locals and by musicblocks. Please check the same and commit again. I believe that will solve the issue.

@github-actions
Copy link
Contributor

✅ All Jest tests passed! This PR is ready to merge.

@stutijain2006
Copy link
Contributor Author

@walterbender This PR is ready for review and merge , please see to it.

@walterbender walterbender merged commit 4b1195a into sugarlabs:master Mar 15, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants