We Keep Coding

How can I measure the performance of a javascript heavy webpage on a client computer?

How do I measure if my jQuery (or JS) heavy webpage is dragging/ affecting the CPU performance of client computers (and touch devices)?
I'm not asking about load times/etc as they are dependant on the number of JS files. I'm asking about client side resource consumption and associated stability issues if any.
To be specific: I'v embedded a jQuery rotate function to perpetually animate an image, and a couple of other jquery based animated objects in the wordpress template.

You can use webkit profiler (profile, audit tab) that comes with web browsers like Google Chrome. Also extensions like page speed and speed tracer are really awesome. You can get an idea on the whole browser process like how much time it spends in UI thread, executing javascript etc.

This is a good question.
You could try Eric's tool that reports the frame rate of the browser.
http://churchm.ag/monitor-javascript-performance/
I'm not sure if this is something that you want to test during development, or monitor has feedback from real clients. It could be possible to run the above Javascript has a background thing and then send AJAX messages back to the server to report the performance for a visitor.
Another script I found attempts to measure CPU performance, but I don't know how good it is.
http://blog.pothoven.net/2007/12/performance-based-web-app-functionality.html

I wouldn't suggest using it on a production server, but Firebug has Javascript performance analysis tools. http://getfirebug.com/javascript

You can use the Google Chrome Web Inspector, specifically the "Profiles" panel. Here's some more information on it...
http://jtaby.com/2012/04/23/modern-web-development-part-1.html#The%20Profiles%20Panel%20

Benchmarking/Profiling JavaScript

i am currently investigating possibilities for profiling/benchmarking javascript code in terms of runtime behavior. I know that there are some decent tools if you run the code in your browser (firebug, chrome dev-tools, etc.), but I am looking for a method that can be automated for testing.
If possible, I would like to integrate performance tests (e.g. execution time of certain functions/code blocks) into a CI cycle. Additionally, i would like to collect runtime information about memory allocations.
Currently i track the execution time of functions/code blocks by adding tracking-code by hand. Has anybody implemented a better solution to do this? How do you profile/benchmark your JS code?
Please share your experience with me!
Thanks

John Resig wrote in 2009 about a free tool that profiles IE (and now Firefox, too) in detail. According to the vendor the Premium Version also integrates with Selenium and supports Web Driver scripts.

Measuring memory usage when developing mobile web applications

I'm writing a mobile web application using JQuery Mobile, JQuery, Javascript. This is my first run at writing a mobile web application so I'm trying things out. I want the program I'm writing to continuously run in the background so I can't rely on a garbage collector and I'm worried about memory usage on a mobile device. I'm being careful to "null" and "delete" vars and functions when I'm done with them but I'd like a tool or system I can use to measure. I'm using CS5 Web Premium as the platform with which I'm writing my code. So...
Question: How do you test memory usage when bulding mobile web applications?

The easiest would be to type about:memory in your GoogleChrome browser and watch the memory usage there.....
You could also use something like DynaTrace to get more details per jscript function (execution times and so on)

The Mobile validator of the W3C http://validator.w3.org/mobile/ Should tell you what size your site is. (How much memory it takes to load) That is if your application is HTML.

Web Automation Tool

I've realized I need a full-fledged browser automation tool for testing user interactions with our JavaScript widget library. I was using qunit, starting with unit testing and then I unwisely started incorporating more and more functional tests. That was a bad idea: trying to simulate a lot of user actions with JavaScript. The timing issues have gotten out of control and have made the suite too brittle. Now I spend more time fixing the tests, then I do developing.
Is it possible to find a browser automation tool that works in:
Windows XP: IE6,7,8, FF3
OSX: Safari, FF3
?
I've looked into SeleniumIDE and RC, but there seems to be some IE8 problems.
I've also seen some things about Google's WebDriver, which confusingly seems to work with Selenium.
Our organziation has licenses for IBM's Rational Functional Tester, but I don' think that will work on the MAC.
The idea is to try to run tests on all the browsers our organization supports. Doable? Are my requirements unrealistic? Any recommendations as far as software to try?
Thanks!

I would recommend using Selenium but I say that as a Selenium Committer.
Selenium works on any browser that supports JavaScript since the framework has been written in JavaScript. This means if your browser on any OS supports JavaScript it will run in Selenium. That documentation it out of date, you can see that since it is talking about IE8b1 and IE9 preview is out now.
Selenium and WebDriver (which isn't a Google thing since it started at ThoughtWorks) are currently being merged as they both have their strengths and weaknesses. The current merged work will be called Selenium 2 and you can start using the alpha release now at http://code.google.com/p/selenium/. It will still work on any OS as that is still the main driving force behind the work being done.
Selenium IDE only works on Firefox because it is a Firefox add on.
I personally would avoid Rational Functional Tester because it has a lot of weaknesses that its not even worth contemplating.
If you start with Selenium there are some tutorials on my site at http://www.theautomatedtester.co.uk

Try Sahi (http://sahi.co.in/) It works across browsers and operating systems. It has a powerful recorder, and great APIs for object identification. It supports HTTPS, proxy tunneling etc. and has drivers in sahi script, java and ruby. It also has parallel playback inbuilt. It is 5 yr old mature project hosted on SourceForge, with releases almost every month.
It automatically waits for AJAX and page loads, and does not use XPaths for object identification. It also handles sites with dynamic ids.

Selenium is probably your best bet out of the tools you mentioned. What are the issues it has with IE8? You might want to check out HttpUnit to see if that meets your needs, also.

Selenium RC is a great tool if you invest the time to use it. With significant modifications to the existing library I've gotten it to fulfill all of my front end testing needs.
The confusion you are having about Webdriver is understandable. Selenium 2 is in development and will be a merge of Webdriver and Selenium. Check out: http://www.youtube.com/watch?v=RQD4EzWI4qk to get more detail.
The only browser that I have found to be unusable with Selenium is IE6. IE7 and IE8 work fine as does Firefox (which I have modified to include firebug for debugging purposes).

I'm in the same boat. It is a difficult problem to solve. Windmill and Selenium are the 2 best I've found. Though they both have issues. Selenium can only record scripts in Firefox and I haven't managed to get the proxy chaining to work as advertised. Windmill you can record in any browser and you can supposedly tweak the proxy to put extra logic in there, but the js mechanism for recording across page loads has been in my experience very brittle at least on the app I have to test.
I don't think anyone can get it quite right as long as there is more than one browser that needs to be supported.

Maybe have a look at SIKULI. It's a different paradigm but, depending on what you want to test exactly, it may do the job and will work with any browser, on any platform.
Have a look at their official blog for some examples of interactions with web applications.

So I wrote some of my more problematic tests in Selenium RC, using the Python driver. It was a better experience than writing the same tests in pure JavaScript, but I still had some of the same issues.
Testing something like an ajax autocomplete widget, meant forking some of the code depending on IE, or Firefox, and I still can't get typeKeys or a combination of type with typeKeys to work in Safari.
So, I am not sure if having cross browser clean, extensive ui tests is a bit unrealistic.
Should I try webdriver/Selenium 2? Would that make things better, or is that product not ready for prime time yet? How's the Python binding for that? I don't know Java, but I would learn some if need be.

Some kind of task manager for JavaScript in Firefox 3?

Recently I have been having issues with Firefox 3 on Ubuntu Hardy Heron.
I will click on a link and it will hang for a while. I don't know if its a bug in Firefox 3 or a page running too much client side JavaScript, but I would like to try and debug it a bit.
So, my question is "is there a way to have some kind of process explorer, or task manager sort of thing for Firefox 3?"
I would like to be able to see what tabs are using what percent of my processor via the JavaScript on that page (or anything in the page that is causing CPU/memory usage).
Does anybody know of a plugin that does this, or something similar? Has anyone else done this kind of inspection another way?
I know about FireBug, but I can't imagine how I would use it to finger which tab is using a lot of resources.
Any suggestions or insights?

It's probably the awesome firefox3 fsync "bug", which is a giant pile of fail.
In summary
Firefox3 saves its bookmarks and history in an SQLite database
Every time you load a page it writes to this database several times
SQLite cares deeply that you don't lose your bookmarks, so each time it writes, instructs the kernel to flush it's database file to disk and ensure that it's fully written
Many variants of linux, when told to flush like that, flush EVERY FILE. This may take up to a minute or more if you have background tasks doing any kind of disk intensive stuff.
The kernel makes firefox wait while this flush happens, which locks up the UI.

So, my question is, is there a way to have some kind of process explorer, or task manager sort of thing for Firefox 3?
Because of the way Firefox is built this is not possible at the moment. But the new Internet Explorer 8 Beta 2 and the just announced Google Chrome browser are heading in that direction, so I suppose Firefox will be heading there too.
Here is a post ( Google Chrome Process Manager ),by John Resig from Mozilla and jQuery fame on the subject.

There's a thorough discussion of this that explains all of the fsync related problems that affected pre-3.0 versions of FF. In general, I have not seen the behaviour since then either, and really it shouldn't be a problem at all if your system isn't also doing IO intensive tasks. Firebug/Venkman make for nice debuggers, but they would be painful for figuring out these kinds of problems for someone else's code, IMO.
I also wish that there was an easy way to look at CPU utilization in Firefox by tab, though, as I often find myself with FF eating 100% CPU, but no clue which part is causing the problem.

XUL Profiler is an awesome extension that can point out extensions and client side JS gone bananas CPU-wise. It does not work on a per-tab basis, but per-script (or so). You can normally relate those .js scripts to your tabs or extensions by hand.
It is also worth mentioning that Google Chrome has built-in a really good task manager that gives memory and CPU usage per tab, extension and plugin.
[XUL Profiler] is a Javascript profiler. It
shows elapsed time in each method as a
graph, as well as browser canvas zones
redraws to help track down consuming
CPU chunks of code.
Traces all JS calls and paint events
in XUL and pages context. Builds an
animation showing dynamically the
canvas zones being redrawn.
As of FF 3.6.10 it is not up to date in that it is not marked as compatible anymore. But it still works and you can override the incompatibility with the equally awesome MR Tech Toolkit extension.

There's no "process explorer" kind of tool for Firefox; but there's https://developer.mozilla.org/en-US/docs/Archive/Mozilla/Venkman with profiling mode, which you could use to see the time spent by chrome (meaning non-content, that is not web-page) scripts.
From what I've read about it, DTrace might also be useful for this sort of thing, but it requires creating a custom build and possibly adding additional probes to the source. I haven't played with it myself yet.