Is there a way to check the resource usage with a javascript code?
Can i check RAM usage and cpu usage of the script?
Since there are various ways to do something, i might write the code using different methods, and save it in as 2 different files, and check which method is more optimized. Esp when i'm calling a function recursively.
This way, i'll get to learn which methods are better and what to use.
Anything like maybe an addon, or maybe a script to be added that does this. It would be much better if it shows function wise. I'm not sure if something like this exists.
On a note, with chrome inspector, i tried CPU profiling, but it seems to show me values according to time, and does not show the RAM/CPU usage.
There's no uniform cross-browser way to do this. You can get an overall sense of your javascript performance by using Chrome's Timeline tool. Switch between the Timelines and Memory tabs on the left and hit the record button at the bottom. I believe Safari has a similar tool.
Internet Explorer has the excellent DynaTrace tool, although I don't know it well enough to provide detailed instruction on how to use it.
Note that javascript interpreters vary wildly in implementation, so they may have very different performance characteristics. Rather than get caught up in the details of implementation (premature optimization is evil and all that), write your code with good coding practices in mind. That means that if you do have performance bottlenecks (which the profiling tools available will help you locate), you can refactor more readily.
I don't know any specific way to test the Ram and CPU stats of javascript. But I often user http://jsperf.com/ to see how two different functions perform.
Have you tried with Crome Tools > Task Manager in Chome Tools menu options? It shows the CPU and Memory Usage for each process running in the borwser (comprise chrome-extensions).
Related
There is a certain spot on my page (a jquery based web-app) where it kind of hangs. Are there any tools that would quickly determine if there's a specific place it's getting tripped up?
It is on localhost right now, which may alter what tools would be applicable. (I'm not talking about load time, but rather execution time)
Have you seen FireBug?
Firebug for Firefox and Developer Console for Chrome both have built in script profiling tools that will help you identify slow logic in your JavaScript programs.
There is jQuery deep profiling plugin by John Resig. There's also this article from him that talks about Function Call profiling.
There is also this great tool called dynaTrace which gives you the ability to profile in IE (and FF). It provides lot more than simple JS profiling (like DOM rendering measurement) and is quite useful.
Use Firebug, just call:
console.time("timing foo");
Before executing the code you want to measure and:
console.timeEnd("timing foo");
Afterwards. That in a low-fi approach.
The high-fi would be just call console.profile() before the code you want to measure, and then console.profileEnd() afterwards.
DynaTrace is by far the best thing I have seen out there... its Free to use too.. And the best part is it works for IE too where the performance is worst hit. A brilliant application with all performance measures.. needs a little bit of learning but once you are used to it there is nothing like it out there...
it also measures network time in ajax requests.. apart from this the rendering time etc.. it can go deep into JS libraries like Jquery..
Try it!!
So tried my hand at profiling some code and I figured the easiest way to do it (at least on Firefox) was to use either console's time/timeEnd or profile/profileEnd, and I tried both.
The problem I have is with the number of runs I can do before Firefox crashes on me. Now I won't paste the code here because it's typical benchmarking code (and it's very messy), but obviously the gist of it is that it runs functions (a test is represented with a function), logging their execution time for a certain number of runs.
Now with for example, 5e4 it sorta works but I don't think it's enough to spot (very) micro optimizations, but more than that, it crashes.
So how do you profile your JavaScript? Because this way, it's barely feasible.
When I used to profile my JavaScript code I used Chrome's profiler; the JavaScript Console in the developer view gives it, and it pretty much worked for me. Have you ever tried it?
I have tried profiling a page with a lot of scripting in Firebug on FF4 and the same in Chrome (last version). Firefox crashed within a second or two, Chrome didn't seem to have problems with it. Maybe you can find something on it in the Firebug issues list?
Although not a traditional code profiler, I recommend Google's Speed Tracer:
Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by JavaScript parsing and execution, layout, CSS style recalculation and selector matching, DOM event handling, network resource loading, timer fires, XMLHttpRequest callbacks, painting, and more.
I think the profiler in the JavaScript Debugger (aka Venkman) is quite good. The version currently on addons.mozilla.org is not compatible with Firefox 4, but the change necessary to make it work has been committed. See https://bugzilla.mozilla.org/show_bug.cgi?id=614557 for details.
dynaTrace AJAX edition(free)- one more tool in your bag. Offers a little bit more detailed performance metrics, IMHO. They used to have it only for IE, but their new one supports FF too. Also see Steve Sounder's blog
My pages seem to be reacting slow.
There is a lot of JavaScript (jQuery) code on the page. How can I narrow it down? What is taking so long?
The YSlow add-on is the best solution to know why your website is slow.
There are many issues which could be the reason for slowness.
Combining many jQuery to one could help you increasing your performance.
Also you can put the script at the bottom of your page and CSS at top.
If you use Firefox, you can install Firebug and use the profiler.
You can read more about it in Understanding Firebug profiler output, and there is a tutorial in Firebug Tutorial – Logging, Profiling and CommandLine (Part I).
If you use Internet Explorer, you can use dynaTrace Ajax edition.
Read more about it in A Step-by-Step Guide to dynaTrace Ajax Edition, available today for public download .
There's also a built-in profiler in Google Chrome that you can play around with.
Both these solutions will help you narrow down what JavaScript function calls are the most costly, and with repeated profilings you will be able to see the effect your changes has.
Using tools like these will not only make you a better programmer (if you take the lessons to heart, and avoid the same mistakes they point out in the future), they will also give you a new appreciation of what happens in your code, since you will get a behind-the-scenes glimpse you haven't seen before ;)
Also, if you don't know YSlow, like Wazzy is talking about - get to know it... maybe your problem isn't even slow JavaScript code :)
I'm developing a fairly large page with several external javascript files. In IE6, the page hangs for a few seconds just as it's finished loading. I'm not (directly) asking for help debugging this problem, I'm only asking for help finding a tool to help debug this problem.
What I'm looking for is something similar to Chrome Developer Tools's "Timeline" tab. Something that will tell me the run time of my various external scripts (or functions, event handlers, whatever level of granularity is available).
I'd much prefer something that is free, but if that isn't available, I may be convinced to shell out some cash for a little extra quality.
Please keep in mind that I'm looking for tools that will work with Internet Explorer 6.
I think Dynatrace could be what you're looking for.
It's quite complex but integrates well with IE and gives you more data than you could ever use: Number of times functions get called, CPU usage per function, a step-by-step look at the DOM tree being built... It's pretty intense.
Godspeed.
Fiddler2 will work well for tracking all aspects of the load time... unfortunately no pretty timeline chart though.
I am trying to develop a application that has quite a bit of client side based scripts. The page has sections that interact with each other based on different inputs. The problem is when you get alot of content on the page the page slows down DRAMATICALLY in IE7 due to the poor javascript engine integrated with this browswer and also partly, becasue there is quite a bit more data on the page.
I am already using web services for anything I can, JQuery with ID based selectors and as little effects and animations as I can.
Do you guys have any tips that I could use for optimization of this?
A couple off-the-wall suggestions...
Flash as coprocessor. If you have computationally expensive things to do, you can hand them off to Flash. The ActionScript is going to be faster than IE's lousy JS. However, be aware that if you transfer much data back and forth between JS and Flash, it's very slow.
Google Gears. You can speed things up with web workers. When you detect IE7, say that upgrading to IE8 or installing Google Gears will improve the experience.
Possibly Silverlight could be used as a coprocessor. I don't have experience with it, however.
Can you even tell what's slow? Is it when you touch the DOM?
Run your code in a profiler and see what it is actually doing. See where your time is spent. IE8 provides IE7 compatibility and a decent profiler included in its Developer Tools.
To do the profiling in IE7 directly you will have to mess around with Visual Web Developer or the debugger bundled with MS Office. More fooling around is necessary, but it is possible to get it to work. Every time I have needed to set this up on a new computer it has taken me an hour or more to figure out the magic incantation to make it work, but it is doable.
I kind of feel like maybe some of these answers might be missing the obvious.
What is the efficiency of the algorithm you are using? Linear? Logorithmic? exponential? It seems to me, that if it's the JAVASCRIPT that's getting slower, as the document gets larger, then it's the efficiency of YOUR code that's the problem, not MS's. IE javascript is slow, but what makes you so sure that it's specifically a problem with that browser? Do other javascript engines do okay with it?
Without knowing a single thing about what you're doing or how you're doing it, one way to go is to trade off memory usage for speed- Cache previous results, and other optimization strategies which you can find lying around if you read this book or that website about programming.
Another thing to keep in mind is that dom interaction is really slow. If you can reorganize your code to achieve the same thing, but with fewer manipulations in the dom, that will improve performance
Some pretty regular gotchas pertain almost exclusively to the DOM, which is slow accross browsers. Try to user innerHTML wherever possible. It's not the standards-compliant way of doing things, but it is by far the fastest.
If you're looping through DOM elements using something like the following:
for (var i = 0; i < domNodes.length; i++) { ... }
Note that every time you request the length of a NodeList, a rather expensive lookup operation is performed. You're better off caching the length of the NodeList as follows:
for (var i = 0, il = domNodes.length; i < il; i++) { ... }
The performance improvements here are incredible. Robert Nyman did an interesting comparison of for loops. If you've never heard of this, the performance boost might surprise you.
This is an excellent google tech talk video on javascript optimization by javascript guru Nicholas C. Zakas
http://www.youtube.com/watch?v=mHtdZgou0qU
He advises you to use local variables to limit scope lookup, keep javascript css style changes to a minimum(change classes instead) and do them in batches if you have to to reduce browser re-rendering, and lots of other great tips :)
Attach and detach events as needed and do not use behaviors. Also create threads to speed up UI using setTimeout and setInterval. I do this all the time to prevent IU choppiness.