5

Is there a standard (accepted/easy/performant) way to determine how fast a client machine renders javascript?

When I'm running web apps (videos, etc) on my other tabs my JS animations slow to a crawl.

If I could detect slowness from my JS, I would use simpler animations to provide a better user experience.

Update:

Removing animations for everyone is not the answer. I am talking about the simplest of animations which will stutter depending on browser / computer. If I could detect the level of slowness, I would simply disable them.

This is the same as video games with dynamic graphics quality: you want to please people with old computers without penalizing those who have the extra processing power.

Yuji 'Tomita' Tomita
  • 115,817
  • 29
  • 282
  • 245

2 Answers2

0

One tip is to disable those hidden animations. if they are on another tab that is not in focus, what's the use of keeping them animated?

Another is to keep animations to a minimum. I assume you are on the DOM, and DOM operations are expensive. keep them to a minimum as well.

One tip I got somewhere is if you are using image animation manipulation, consider using canvas instead so that you are not operating on the DOM.

Also, consider progressive enhancement. Keep your features simple and work your way up to complicated things. Use the simple features as a baseline every time you add something new. That way, you can easily determine what causes the problem and fix it accordingly.

The main problem you should first address is why it is slow, not when it is slow.

Joseph
  • 117,725
  • 30
  • 181
  • 234
  • 1
    I'm not saying the animations are particularly aggressive or happening while on another tab. Even a simple image fade to 0 opacity will stutter IF your computer is slow enough. There are many slow computers out there, outstanding situations (perhaps you are copying files, watching a movie, etc.) where user experience would be enhanced by progressively removing animations. If I could detect this, I would set up a sliding scale of animation level. None, small, and all out. – Yuji 'Tomita' Tomita Apr 26 '12 at 01:15
  • @YujiTomita then that's one of the things [you just can't control](http://stackoverflow.com/questions/10220530/what-are-the-limits-to-pushing-javascript-performance/10220623#comment13129588_10220623). You might want to ask the guys from [UX.stackexchange](http://ux.stackexchange.com/) what they can recommend for your situation from a UX point of view. – Joseph Apr 26 '12 at 01:22
  • 2
    I disagree. You link to a post about "pushing javascript performance" which I am not trying to do. This is more akin to the opposite: support older computers by disabling even a single image fading. Lowering the bar for everybody is not the solution. Besides, regardless of whether or not we agree, my question is about whether or not / how to measure client JS performance. What one does with this programming is up to them. – Yuji 'Tomita' Tomita Apr 26 '12 at 01:52
0

I know this question is old, but I've just stumbled across it. The simplest way is to execute a long loop and measure the start and end time. This should give you some idea of the machine's Javascript performance.

Please bear in mind, this may delay page loading, so you may want to store the result in a cookie, so it's not measured on every visit to the page.

Something like:

var starttime = new Date();
for( var i=0; i<1000000; i++ ) ;
var dt = new Date() - starttime;

Hope this helps.

tunerscafe
  • 91
  • 8