My team has an existing web app, which is using some Dojo code but isn't fully "Dojo-ified" -- no custom widgets, and our AJAX calls tend to fully refresh the content pane with completely regenerated HTML, rather than just getting JSON data and updating the DOM in-place.
As part of a POC effort, a few of my teammates and I have refactored a part of our code to be "fully Dojo" -- XHR calls invoke RESTful services that return JSON, and everything is run through custom templated Dojo widgets we've created.
We need to measure the impact of this change in multiple ways -- improvements in request / response times, page load timings, and client-side effects such as differences in memory usage.
I'm trying to find some browser tools to measure the size of the generated DOM for each code base, so we can verify we're not massively increasing the memory footprint by going "full Dojo" or otherwise potentially impacting client-side performance. I found a couple of postings related to this ( Tools to measure website size and Tool to measure all (js)objects in a webpage), but they both suggested the use of Chrome's tools and nothing else.
Are there any tools for the other major browsers (Firefox, IE 7/8, and Safari)? Or is Chrome the only one that has such a tool?
IE8+ profiler
Firefox profiler
Safari profiler
Fiddler: http://www.fiddler2.com/fiddler2/
Related
I've got a highly recursive JavaScript function, which calls no other JavaScript functions. It's just the one function calling itself doing some simple logic and calling system functions (Array.slice, Array.splice , Array.push, etc.).
And I'm trying to optimize it, however Chrome's and Firefox's (the only browsers the website works in) DevTools and Firebug's profilers don't show anything more specific than function calls. Visual Studio has a nice thing where after profiling an application, it will tell you what percent of execution was spent on each line of your functions, which is really helpful.
I've tried breaking up the function into smaller functions, but then the function call overhead inflates to take up most of my execution time.
Firebug's and the DevTools' profilers provide you with detailed information on how much time was spent within each function. See the following screenshots:
Firebug (Own Time column)
Firefox DevTools (Self Time column)
Chrome DevTools (Self column)
The Firefox DevTools furthermore allow you to include platform data by enabling the option Show Gecko Platform Data within the Performance panel options:
Though the tools only display data per-function. They do not allow you to display per-line, or to be more precise, per-statement information, probably because this is something the JavaScript author cannot influence directly.
If you believe that this information can be relevant for a JavaScript author, you should file requests for each of those tools to implement this feature explaining the reasoning behind it.
Intel XDK provides information you are asking for. Here is a link to the Inbtel XDK profiling tools: https://software.intel.com/en-us/xdk/docs/using-the-profile-tab There are several pictures and help how to use it.
We are collecting the profile and annotate the source view by the self time metrics.
Currently we are doing this on Android devices, but have plans to migrate GUI to CDT and upstream it. But even before upstreaming this functionality will be available on Windows and Linux platforms in the browser named Crosswalk. Crosswalk is a chromium based browser, containing promising features like SIMD.js or WebCL.js
Several more worlds regarding collected information. Intel XDK JavaScript CPU profiler annotates only sources by self time, but we are working on adding total times - how much time was spend for certain line and all callee functions from this line.
For running of the profiling you need to download XDK, create new project and add your code to it. Then switch to Profile tab, plug the device via wire, select CPU profiler if it is not selected and press Profile button. Waiting your feedback on using it.
A website I'm working on crashes in IE8 through 10. I have been trying to determine if it is related to a memory leak, but the tools available for IE are not really great. I've tried using Sieve ... as well as dynaTrace ... Sieve reports no memory leak, but does report on multiple orphaned dom nodes. dynaTrace does not support memory analysis in IE, and the issue does not seem to present itself in Firefox.
I've reviewed heap snapshots in Chrome Dev Tools... and garbage collection seems to be fine there after about 10 seconds or so of the site loading.
Here is the site in question: http://midlandsbiz.whosonthemove.com/
After several minutes on the site in IE, my AVG will pop-up saying that it is consuming too much memory. This is also evidenced by my fan whirring on my laptop, and the ultimate crash of the site.
This happens on multiple computers, on different networks, using different versions of IE.
I was also able to replicate the issue using the WP theme author's site:
http://kopatheme.com/demo/passion/
I'm getting no response / support at all from the WP theme author about this issue.
I was hoping that someone had some ideas on what might be causing this... or could point me in a direction for some tools that I can use to profile javascript memory usage in IE?
You have some major memory leaks and a HUGE memory footprint. There are actually great memory profiling tools in IE, just open F12 and choose the memory profiling tool. You will want to start a profile. When you take a snapshot you will get a simple visual telling you the size of the page in memory and how many objects. When you have a memory leak you will see a blue circle with the number of leaks. Clicking on that will take you to a view of the objects and you can swim through the tree to find the source of your issues.
I can also tell you have many fundamental performance issues in the site. You have over 200 HTTP requests and 4MB of content. You also have many 404s.
Is there a way to slow down browser DOM rendering and JS execution for development so we can see which parts of the website are too JS intensive and might be slow on slower machines? Maybe an extension for Chrome/Firefox for Linux/OSX?
Some clarification:
It's not about connection or testing the speed of the browser! It's just for our developers to see which parts of the page are rendered slowly or are "glitchy". For example when you use ajax and you are loading something you show a loader, but just after the loader is shown the loaded part is shown too. We want to see that in slow motion. Like when you press SHIFT in OSX when doing Expose.
PS. I did find some articles on delaying Internet connection, but that's not enough in this case.
PPS. Loading everything in VMs didn't work for us.
PPPS. Using slow down code like proposed in Javascript code for making my browser slow down is not the best option in my opinion.
Converting what #z0r said in the comments to an answer:
In Chrome, open devtools and select the Performance tab
Make sure Screenshots is checked
Press the record button (or hit Ctrl + E)
Do your activity
Stop recording
Hover over the timeline to see the screenshots of the screen as things change.
Use the timeline or profiler on your browser inspector. Here you can see, what functions take down the speed.
The accepted answer is good; I use and recommend Chrome Dev Tools as well.
As an alternative to Chrome Dev Tools:
Several 'website performance analysis' services offer timeline views. Run some internet searches and you'll find various free and paid options.
Try webpagetest.org
It's open source, highly regarded and has been running for years. It may offer different information, or is accessible in a different way, than Chrome Dev Tools.
In the test results, click "Filmstrip View".
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.
I have a webpage that heavily uses Javascript (AJAX requests, Google Maps API, HTML building, etc) and the page brings my PC to its knees whenever opened in Internet Explorer. I'm looking for some tools to help me find out which functions are taking the most time to finish. I have some basic profiling javascript functions, but those don't help much considering I don't know what function specifically is being slow. The tool has to be for IE, as the page runs fine in other browsers.
For JavaScript, XmlHttpRequest, DOM Access, Rendering Times and Network traffic for IE6, 7 & 8 you can use the free dynaTrace AJAX Edition
You might actually want to check out the Developer tools that come with IE8. I know js debugging and profiling are part of it.
Take a look at YUI Profiler.