fps-counter affect FPS

Open
#236 2 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
javascript
Domain
performance

Research direction

Start at the fps-counter component and inspect how it uses the stats component, setTimeout, and DOM text each tick. Compare its behavior with the alternative implementation in the issue; done should address the reported per-tick DOM access, parsing, formatting, and allocation concerns while preserving FPS display.

Written by the indexing model from the issue text.

Description

Hi there.

Thanks for all your wonderful work contributing to A-Frame!

I'm a little concerned about the fps-counter component. Such a component needs to be very sensitive to FPS, both measuring and impacting, and I'm not sure the component is 'careful' enough with regard to DOM access and garbage collection.

Specifically:

  • it creates a new anonymous function (to pass to setTimeout) every tick
  • it accesses the DOM (.innerHTML) every tick
  • it parses floats from text every tick
  • it formats floats (.toFixed) every tick
  • it requires the stats component (and keeps parsing its DOM)

I'm not good enough at A-Frame to know if this is a big deal, but it seemed to be a problem for me. I ended up writing my own version of fps-counter:

AFRAME.registerComponent( 'fps-counter', {

	init() {
		this.el.setAttribute( 'text', { align: 'center', side: 'double', color: 'white' } );
		this.ticksSinceLastInterval = 0;
		setInterval( () => {			
			this.ticksToDisplay = this.ticksSinceLastInterval.toString();
			this.ticksSinceLastInterval = 0;
		}, 1000 );
	},

	tick() {
		this.ticksSinceLastInterval++;
		
		if ( this.ticksToDisplay !== undefined ) {
			this.el.setAttribute( 'text', 'value', this.ticksToDisplay );
			this.ticksToDisplay = undefined;
		}
	}
} );
Dominant language
JavaScript
Stars
1.4k
Forks
425
No merged PRs in 30d

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.

More from supermedium/superframe

All issues in supermedium/superframe

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.