Three fixes in 43 minutes for a 2GB memory warning, and only the third one mattered

Three fixes in 43 minutes for a 2GB memory warning, and only the third one mattered

We recently put our browser game One Life on the Playgama web portal. It's a small game where each year of your life is one line, and the start screen has a globe drawn on a canvas. Playgama runs an analyzer on every upload. Ours came back with a warning that the page was using over 2GB of memory. The three pull requests 11:10. We blamed the globe first, moved its canvas onto its own compositing layer and shipped it. 11:21. It still looked like a rendering problem to us, so we switched the globe to a software canvas and shipped again. Neither fix touched the logo, which was still sitting on top of the globe canvas. 11:53. We took the logo out of the layout flow with position: absolute. The overlap went away, and the warning went with it. What was actually happening The analyzer loads the page in headless Chrome with no GPU. With the logo on top of the globe canvas, the main thread stalled on first paint and memory went past 2GB. It took both elements to trigger it. Removing only the logo made the problem disappear, and so did removing only the globe. That means the layer change and the software canvas were both tweaks to the rendering of something that was only half the cause. The part we're not proud of Every time, we shipped the next fix before the analyzer had finished reporting on the last one. Three PRs in 43 minutes sounds quick. Really it means we never let one attempt tell us anything before we moved on. Our first commit message said we'd bisect with variant uploads: one build without the logo, one without the globe, then compare. That would have pointed straight at the overlap. We wrote it down in the first commit. Then we skipped it. If a warning only shows up in a headless run, check what overlaps what before you touch any rendering flags. The game, if you want to see the globe: https://qqq1212341.github.io/one-life/?utm_source=launch-devto&utm_medium=community

Original Source

Read the full article at Dev →

KhanList aggregates and links to publicly available news content. We do not host full articles from third-party sources. Always verify important information with original sources.