I am having a problem trying to articulate what I am trying to measure but I would do my best in hope for some assistance.
If I would to bind alot of functions to the .resize() event or to add massive amount of listeners, somehow I believe that the cpu processing would increase and that at a certain point the application would lag. (Do correct me if I am wrong).
I am attributing this to the CPU usage(Please correct the term if it is wrong).
Is there anyway to measure this lag(cpu usage).
Thanks
In Google Chrome's Developer Tools there are timelines for recording memory usage and CPU profiling. Lots of good examples on the web for how to use these tools.
You can monitor your browser in TaskManager if you're using Windows.
JavaScript executes in the browser, so it will be part of the footprint of the browser itself.
Some times different browsers will run the same JavaScript with different performance. It just depend how optimized the browser is for that particular code block.
Most browsers will also give you profiling tools that will enable you to pinpoint specific JavaScript functions that are slow. (ex IE dev tools). This is necessary to take a more targeted approach when troubleshooting your performance issues.
Related
I've inherited a client-side js/css/html code base that does way too much. It Chrome/Firefox/Edge, it's reasonably quick, but in IE11 - it's unusable. Since it does a massive amount of stuff, it's difficult to follow along. There tons of things running on timer, events on mousemove, script deferals, endless layout events when nothing is happening on screen, various modules loading every JavaScript framework from the last 10 years, you name it.
Is there anyway to get the F12 tools in browsers to dump out to the console what function it is currently running?
P.S. I've recorded performance, but it didn't reveal a whole lot.
You could try out recording your own performance marks to narrow bottlenecks and work out from there.
I did my first canvas, and you can see it here My Canvas.
The main idea of this canvas is that when you go with the cursor against the points they escape from it.
What I want now is to know how much my canvas will use the resources of the user's PC. For example, the RAM, the CPU or GPU.
In particular, in my script there is a function called every 7ms:
setInterval (spiderFree, 7);
I wonder how this can be expensive for a computer.
However the question is, how can I control the expenditure of computer resources due to my script?
You should take a look at this article from Paul Irish on his requestAnimationFrame cross-browser shim.
It will firstly try to optimise frames based on browser capability, and also, have backwards compatibility for old, non-GPU enabled browsers.
From the jQuery ticket:
Benefits:
let the browser choose the best 'animation tick' rate (instead of our
arbitrary 13ms)
greatly reduce animation CPU usage when switching tab
helps keep animation synchronized
Full list of claimed benefits
here
This is the 'industry standard' way of ensuring the best possible frame rate and resource utilisation of your animations.
In addition to Alex's good answer, bear in mind that you can use Firefox's developer tools (F12). You can use the Performance tab to see exactly how long your code is taking to execute, and which parts take the longest. You can also use the Canvas tab to analyze the frames. (You'll need to enable these features from the Settings tab).
JavaScript in Chrome (or any other browser for that matter, but I rather limit the discussion to Chrome to make it simpler) does not provide an API which can be used to observe memory related information (e.g. how much memory is being used by the current tab where the JS is running).
I am looking for a creative solution for getting an estimation of how much bytes I can cache in a JavaScript object that my web page is running. The problem definition is that I would like to cache as much as possible.
Can anyone think of a decent way of estimating how much memory can a tab handle before it will crash / become unusable on a machine? I guess a statistical approach could work out fine for some cases, but I'm looking for something more dynamic.
There are lots of tools for debugging JavaScript codes (like FireBug, Chrome console), but is there a tool for debugging a process. This probably need to monitor the resource (e.g. CPU) usage to find the bottleneck in the process.
I create Javascript animations for moving an element (in a simpler case opening/closing menu), but the movement is now smooth. Different factors can cause overload, e.g. heavy CSS3 gradients. But how to detect the rate-limiting process?
This is indeed the problem of most of websites. When opening a webpage, overload of javascript processes kills the page load. Most of animations/menu actions are broken.
When a JavaScript animation is not running smooth, how do you debug the problem?
OR a more general question, how to monitor the resource usage of running JS process to make a webpage lighter (an faster load on computers with limited resources)?
I would use the timeline->frames in Chrome. Paul Irish has a lot of great talks about this, here is one https://www.youtube.com/watch?v=Vp524yo0p44
Also when doing animation do not use setTimeout/setInterval, the precision is not good enough. Instead use requestAnimationFrame. More information about requestAnimationFrame can be found here. http://paulirish.com/2011/requestanimationframe-for-smart-animating/
Edit: This talk by Paul is also really interesting regarding speed and debugging speed in the browser: https://www.youtube.com/watch?v=MllBwuHbWMY, and here is a quite recent discussing 2D transforms vs absolute positioning: https://www.youtube.com/watch?v=NZelrwd_iRs
Different machines => different performance => different bottlenecks
If animation isn't running smoothly I try to lower on graphics or animation itself. Who says that users are using as powerful machines as you do? So they may hit the issue sooner than you.
But I'd still suggest Process Explorer as it can individually show load of a particular processes. In general it's a more insightful tool compared to default Task Manager provided by Windows.
I have a huge Web App that's switching from a HTML-rendered-on-the-server-and-pushed-to-the-client approach to a let-the-client-decide-how-to-render-the-data-the-server-sends, which means the performance on the client mattered in the past, but it's critica now. So I'm wondering if in the current state of affairs it's possible to profile Web apps and extract the same data (like call stacks, "threads", event handlers, number of calls to certain functions, etc) we use for server side perf.
I know every browser implements some of these functionalities to some extent (IE dev tools has an embedded profiler, so does Firefox [with Firebug], and Google Chrome has Speed Tracer), but I was wondering if it'd be possible to get, for example, stack traces of sessions. Is it advisable to instrument the code and have a knob to turn on/off the instrumentation? Or it's simply not that useful to go that level in analyzing JavaScript performance?
Fireunit is decent and YUI also provides a profiler, but neither provide stack traces or call frames. Unfortunately, there aren't many JS profiling tools out right now. And none of them are particularly great.
I think it's very important to go to a high level of performance analysis, especially considering the user will deal with the JS app 90%+ of the time directly.