My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Thursday, September 13, 2007

JPU - JavaScript CPU Monitor

This is a little experiment, based on single threading JavaScript behaviour and for this reason not "perfect".

As You can see on top right of this blog, JPU just tell You if your operations inside this page have a cost for your CPU.

For example, try to click one mini-banner on the right side (OCS - DCS) and look at JPU monitor during fade in/out.

The better browser I've tested is Opera but FireFox and Internet Explorer seems to work nicely too :-)

If You want to add a JPU in your site, just use a script tag like this one:

JPU - by WebReflection

If You just want to test JPU inside another site, using FireFox or uriscript compatible browser, just use this lik.

Please remember that JPU is just for fun, about 0.5 Kb and quite totally unobtrusive.

Have fun with JPU :D

Istant Update
Here You can view a demo page comparing them with your Operating System CPU monitor (not so different in my case :D)


{Michael : iSkitz} said...

Hi Andrea,
Hmmmmm . . . So I briefly looked over this article and thought "oh cool, that's interesting". I opened your JPU Demo page in a separate tab, watched the little meter float up and down, then switched back to the tab with your main blog.

I fell asleep for a few hours and when I woke up my browser (Firefox was dying/choking/in trouble. I believe there's a memory leak and/or runaway CPU use problem occurring on the JPU demo page. After closing the JPU demo tab browser memory and CPU usage dropped to about 1/5. At the peak of the problem memory use reached 775MB+!!!

I haven't done any research to figure out why that might have happened, but maybe you can...

Andrea Giammarchi said...

Hi Mike,
what you say about demo page is true: it was created to show monitor behaviour and there's an "hidden" div (just with #FFF text) incremented each 250 milliseconds.

Your memory problem is caused by DOM but I didn't think someone will visit that page for hours :D

I suppose the better JPU example You can see is visiting a website such or this one, then copy this code with right mouse button, paste them inside URI space and press RETURN:


If You drag quickly login widget You'll see my monitor grow up qhile if You don't do anything You'll se my monitor at 1/5 ... just try and tell me if You like my JPU experiment, thank You :-)

{Michael : iSkitz} said...

Thanks for the quick reply Andrea. Your JPU idea is definitely cool, I'm just wary of things that make the browser crash or become unresponsive :-) I figured I'd let you know what I saw so if there was any way to fix it you might.

Anonymous said...

Works with Ubuntu 7.04 and Opera. Nice!

SureshG said...

Hi Very nice job...

Can u please explain me the logic behind that .

Andrea Giammarchi said...

I think this Marat Denemberg comment could explain my simple JPU logic ;-)

just a note, JavaScript is always single thread inside each browser (except for external plugins ... Rhino, SpiderMonkey or others .. but these just work in a different enviroment, not browser)

Ariel Flesler said...

Having it included in the page, keeps my browser at 10% CPU minimum.. is that normal ?

Andrea Giammarchi said...

flesler the minimum value is 1, JPU is never 0 but it was a choice to show something instead of white square :-)

Ariel Flesler said...

No andrea, I mean: The level of my CPU, in the REAL process manager stayed at 10% till I closed the page. I meant if the overhead of the interval will always be more or less high.

Andrea Giammarchi said...

flesler, in this page I don't have CPU monitor at 10% and interval is quite slow (about 250 ms).

You have 2 options:

1 - Your PC is a Celeron 300 Mhz and JavaScript is always a problem

2 - You have other scripts/movies/things that make my JPU realistic and the problem is not JPU

Which one? :-)