Open code, practice, and notes →
Download source with English comments · for reading
26 · FPS·Draw Calls·memory analysis
Week 4 / original Day 26 · Document and example provided · This is a learning sequence, not a fixed daily workload.
Full roadmap · Workspace usage
Goal
Record a performance baseline under reproducible conditions.
Prerequisites
07, 18, 22.
Key concepts and explanations
Fix the device, browser, viewport, DPR, data, camera path, warm-up, and measurement duration. Observe frame-time distributions and long frames as well as average FPS. JavaScript execution time is not GPU time.
renderer.info.render.calls and triangles are partial indicators of rendering work. renderer.info.memory.geometries/textures are object counters, not measurements of actual total GPU VRAM. Browser and driver caches also mean OS memory may not decrease immediately after disposal.
Skills you will develop
- Record a performance baseline under reproducible conditions.
- Reproduce the completion criteria below and answer the self-check questions in your own words.
Exercises
- After pnpm build, define a representative path in pnpm preview.
- Fill in the conditions and observation tools in docs/performance.md.
- Measure the same path several times and distinguish loading, CPU updates, and rendering intervals.
Variables to observe
Keep conditions fixed for the baseline. There is no intentionally changed variable yet.
Completion criteria
- Described measurement conditions reproducibly.
- Recorded repeated results and variation.
- Distinguished renderer.info from total VRAM.
Self-check questions
- Can the experience differ even at the same FPS?
- If memory does not decrease immediately, is it always a leak?
Official references
Experiment notes — fill these in yourself
Goal
Key concepts
Changed variables and predictions
Actual results
What I learned
Remaining questions
Previous: Markers and Raycasting · Next: Resolution·data optimization
Linked example and execution scope
Runnable source code · Workspace unit ID: 26-performance
Edit the linked source code in Monaco to apply it to the sandbox preview after checks. Perform the extension exercises and completion criteria yourself and record the results.
Any previously saved code is preserved. To use the new original source, first back up everything as a full JSON file, then select Restore original code. Your notes are not erased.