perf: extend viewport culling to updateCache and markStageDirty for off-screen blocks

[ssz2605]

PR Category

• Performance

Problem

During playback, every executed block is highlighted and then unhighlighted. Each transition performs a synchronous container.updateCache() and triggers markStageDirty(), resulting in a subsequent stage.update().

For large projects such as Crab Canon Plot, many blocks extend well beyond the visible viewport. However, the highlight logic only checked container.visible (the eye icon) and not whether the block was actually within the viewport. As a result:

• Off-screen blocks still performed expensive updateCache() operations.
• Off-screen highlight/unhighlight triggered unnecessary stage redraws.
• Rendering work was performed for visual changes that were never visible to the user.

Solution

Skip rendering work for blocks outside the viewport while preserving correct highlight state.

Changes

• js/block.js

  • Skip updateCache() during highlight() when the block is outside the viewport.
  • Skip updateCache() during unhighlight() for off-screen blocks while still updating bitmap state to prevent stale highlights when the block becomes visible again.

• js/logo.js

  • Only call markStageDirty() after highlight() if the block is visible in the viewport.
  • Only call markStageDirty() after deferred unhighlight() if the block is visible.
  • Only call markStageDirty() after end-of-child-flow unhighlight() if the block is visible.

Results

Metric	Before	After
updateCache() calls	5,800	866 (-85%)
Time spent in updateCache()	600 ms	90 ms (-85%)
stage.update() (best case)	411 ms	369 ms (-10%)
stage.update() (worst case)	1,476 ms	1,239 ms (-16%)

Note

• Bitmap visibility toggling in unhighlight() remains unconditional , only updateCache() is gated. This prevents stale highlight state when a block scrolls back into viewport.
• This extends the viewport culling introduced in perf: cull off-screen blocks from display list to reduce stage.update() cost #7738 to the block highlight rendering path.
  -This does not affect total playback time, which is dominated by audio scheduling. The improvement is in rendering efficiency and frame consistency.

Verification

• Lint: 0 errors
• Prettier: clean
• Tests: 187 suites, 6,585 tests passed

[codecov]

Codecov Report

❌ Patch coverage is 31.25000% with 11 lines in your changes missing coverage. Please review.
✅ Project coverage is 59.26%. Comparing base (e58db21) to head (7382b7f).
⚠️ Report is 4 commits behind head on master.

Files with missing lines	Patch %	Lines
js/logo.js	22.22%	7 Missing ⚠️
js/block.js	60.00%	2 Missing ⚠️
js/blocks.js	0.00%	1 Missing ⚠️
js/turtle-singer.js	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7798      +/-   ##
==========================================
- Coverage   59.27%   59.26%   -0.01%     
==========================================
  Files         176      176              
  Lines       57975    57979       +4     
==========================================
- Hits        34365    34364       -1     
- Misses      23610    23615       +5     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.