6

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.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
zacaj
  • 1,987
  • 1
  • 19
  • 39
  • If you can just manually pause it at a random time, and display the call stack, that will show you every line of code that's currently executing. Do it 10 times. The cost of every line of code or function you see is roughly the fraction of the time you see it on the stack. This gives very rough measurement, but while the time measurement is rough, the information about *why* it's taking time is very detailed. And after all, that's what you really want to know, isn't it? – Mike Dunlavey Apr 01 '15 at 20:29
  • As I understand the question it is asking for per-statement profiling. So a JavaScript author can get to know e.g. whether to use a regular expression to match a string or do manual string parsing, right? – Sebastian Zartner Apr 01 '15 at 22:16
  • @SebastianZartner correct – zacaj Apr 02 '15 at 00:02
  • So then it's a valid request to enhance the different DevTools. See my answer below. – Sebastian Zartner Apr 02 '15 at 05:16
  • Even by breaking up the function into smaller functions, while still a lot of function call overheads, the relative costs between functions (representing lines) would still be accurate, no? – jsantell May 11 '15 at 02:06
  • @jsantell I fear the function call overhead would make the per line cost look like margin of error – zacaj May 11 '15 at 12:46

2 Answers2

1

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) Profiler output in Firebug

Firefox DevTools (Self Time column) Profiler output in Firefox DevTools

Chrome DevTools (Self column) Profiler output in Chrome DevTools

The Firefox DevTools furthermore allow you to include platform data by enabling the option Show Gecko Platform Data within the Performance panel options:

Firefox DevTools *Performance* panel option to include Gecko platform data

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.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
0

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. enter image description here

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.

Andrey Malyshev
  • 64
  • 5