processing / processing/processing-website

Performance Issue | banner on processingfoundation.org/grants taking up 100% of CPU (on firefox)

Open
#642 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
MDX
Stars
90
Forks
122
Avg merge
1h 43m
Merged PRs (30d)
3

Description

Select the most appropriate label(s) for this issue.

Performance

Describe the bug

the banner on the grant sub-page of processingfoundation.org makes the website take up 100% of the CPU.

Image

my quick performance test from the firefox devTools revealed, that there are a lot of calls to requestAnimationFrame callback which sometimes take up to 500ms and therefore blocking the main thread.

Image

I originally noticed this when I had my own p5.js sketch running on a second screen and the sketch suddenly lagging extremly behind. I"ve also conducted a quick test on my machine with chrome where the problem doesn't seem to appear, tomorrow I might also test it on my macBook with safari.

Expected behavior

The processingfoundation.org/grants banner-sketch shouldnt be taking up 100% of browser CPU

Browser

Firefox

Browser version

141.0 (64-bit)

Operating system

Linux POP_OS

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue at processingfoundation.org/grants in Firefox 141 on Linux and inspect the banner sketch with Firefox DevTools' performance tools. Trace the requestAnimationFrame callbacks and compare behavior with Chrome; done means the banner no longer drives CPU usage to 100% or blocks the main thread for hundreds of milliseconds.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, performance, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.