Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Slow javascript execution in chrome, profiler yields "(program)"

How would I go about determining what the hangups are in my javascript app when the profiler puts (program) at the top with 80%? Is my logic too complex for the hotspot tracking to occur? Is my memory footprint too big? What is generally the cause of this?

More Information:

  • There are no elements on the form save the one canvas tag
  • There are no waiting communications (xhr)
  • http://i.imgur.com/j6mu1.pngProfile data
like image 919
Dested Avatar asked Feb 29 '12 05:02

Dested


People also ask

Why is JavaScript slow?

JavaScript is a problematic language, because it allows a developer to write very inefficient code, mostly due to its dynamic nature, but also due to a support for strange language elements (look at with statement).

What is scripting time in Chrome performance?

To be able to visually identify what was going on when you profiled your website, Timeline is painted in different colors. JavaScript execution time is marked in yellow and it's called Scripting. The purple area shows the Rendering and the green parts of the Timeline show the Painting process.

How do I code a JavaScript profile?

JS Profiling You can also access it through the keypad shortcut Ctrl+Shift+I. Once you've opened this in-browser pop-up, navigate to Performance in the tabs. It was helpful of Google to integrate a JS profiler into your browser – it means you can profile and optimize your code on the go.


2 Answers

Idle cycles ("doing nothing") will also render as "(program)" (you may profile this SO page for a few seconds and get 100% of (program)), so this is not a sign of something bad in itself.

The other thing is when you actually see your application lagging. Then (program) will be contributed by the V8 bindings code (and the WebCore code they invoke, which is essentially anything: DOM/CSS operations, painting, memory allocations and GCs, what not.) If that is the case, you can record a Timeline of your application (switch to the Timeline panel in Developer Tools and press the Record button in the bottom status bar, then run your application for a while.) You will see many internal events with their timings as horizontal bars. You will see reflows, style recalculations, timers fired, GC events, and more (btw, the latest Chromium versions have an improved memory profiler utilization timeline, so you will be able to monitor the memory used by certain internal factors, too.)

To diagnose memory problems (multiple allocations entailing multiple Full GC cycles) you may use the Profiles panel. Take a heap snapshot before the intensive part of your code starts, and another one after this code has run for some time. Then compare the two heapshots (the right SELECT at the bottom) to see which allocations have taken place, along with their memory impact.

like image 115
Alexander Pavlov Avatar answered Oct 13 '22 08:10

Alexander Pavlov


To check if it's getting slow due to a memory option use: chrome://memory

Also you can check chrome://profiler/ for possible hints of what is happening.

Another option is to post your javascript code here.

like image 39
Chibueze Opata Avatar answered Oct 13 '22 09:10

Chibueze Opata