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.
Related
I have a very large javascript application, which contains mostly asm.js code (it's built upon urho3d c++ engine which is them compiled into asm.js).
It runs great on most browsers (chrome, firefox, safari, edge) but is extremely slow on IE11. The thing is, it is only slow until you open developer tools. With developer tools open, IE11 becomes ~10 times faster and is almost as fast as other browsers.
Here is a minimal example that reproduces the issue:
http://test.sebbia.com/urho3d/test.html
Open the page in any working browser, the time between "Run - start" message and "Run - finish" message should be around 1-2 seconds.
Open the page in IE11 without developer tools, time should be around 35-50 seconds.
Open developer tools and reload, time should be around 2-3 seconds.
Another important note is that if I start profiling session in developer tools, performance drops like if developer tools were closed. So I can actually profile the problem. But I've spent several hours profiling and I've tried inserting log messages in big functions but I haven't found no bottleneck. All functions take roughly the same time to execute and if I insert log message in a middle of a big functions, they'll usually break into 2 similar parts. So there is no single function that is responsible for slowdown, the code execution is just slow. Bit shifts, functions calls, arithmetic operations - it seems like they all just take way too much time compared to open developer tools.
I really need to make my app work on IE11 and the fact that it works with developer tools open drives me crazy. I'm trying to find a way to make IE think that tools are open even when they are not, or achieve good performance by any other means. So my questions is how can I achieve performance equal to IE11 with developer tools open without actually manually opening the tools?
This is a very broad question so I'd like to break it down into several smaller questions:
Is there a way to make IE11 think developer tools are open? Maybe there is something like x-ua-compatible meta tag I am missing?
What's causing the slowdown when developer tools are closed? I've heard that console.log function calls are slow without developer tools on IE8 and 9, maybe there is a similar thing on IE11? Maybe asm.js is not optimized? If I knew what's causing this I could at least try to rewrite code to avoid this.
Is there a way to open developer tools from javascript code? Maybe I could ask users to press a button on website to "make app faster". Asking them to press F12 or navigate settings seems too much.
When the debugger is enabled, asm.js compilation will be disabled and execution will fallback to be executed as normal JS - you can see the console.logs along these lines at the start of execution.
asm.js has been disabled as the script debugger is connected. Disconnect the debugger to enable asm.js. in Edge,
asm.js type error: Disabled by debugger in Firefox,
whilst Chrome will simply not open 01_HelloWorld.js in the debugger when you attempt to.
Disabling the debugger in IE (debugger tab, socket symbol; eighth from the left), and thus enabling asm.js will allow you to have dev tools open but see the slower execution. I have a horrible feeling that the slowdown when the debugger is closed is actually just IE11's speed issues with asm.js's optimisations.
There are a lot of references to IE11 being poorly optimised for asm.js. caniuse.com goes as far as listing IE11 as not supporting asm.js at all.
https://caniuse.com/#feat=asmjs
This appears to be backed up by Microsoft themselves:
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/asmjs/
There would certainly appear to be some support for it, though clearly it has a number of speed issues as demonstrated in a number of benchmarks, for instance:
https://github.com/Kukunin/asm.js-benchmark/blob/master/README.md
Which shows IE11 around 10x slower than other browsers, or:
https://www.ghacks.net/2014/11/03/massive-benchmark-highlights-asm-js-performance-of-web-browsers/
Which is based on:
https://kripken.github.io/Massive/ - You can try it for yourself.
And many others. It may simply be that the IE11 implementation of asm.js is so poor that it is considerably slower with it, than without it.
EDIT: Added Microsoft platform status link.
There are two workaround for this issue:
to add setInterval(30000, () => {}) to your initialization function;
add MutationObserver=null to the beginning of the main html
You can also reference the discussion here:
https://github.com/OfficeDev/office-js/issues/521
This is just a guess but I had a similar problem in react-native then I found out about this:
When debugging remotely, your js bundle is using chrome's JSC and when
running on a device it's using the JSC provided by Apple on your phone.
Make sure that urho3d is not changing environment when developer tools are on/off.
Question:
What is the best way to communicate between separate Google Chrome rendering processes (tabs) without the use of a web-server?
Background:
I am writing a large application and recently I decided to try and migrate the whole thing to the browser. Due to where I work this is Google Chrome. Previous the application consisted of a c++ based (Qt) webserver / calculation engine and the browser was only used for the GUI. Now I have moved the calculation engine to javascript and I run it in the browser.
The problem is that the GUI is slightly unstable. It will often stay running for about 12 hours but then crash with an "Aw Snap" error. Before I wasn't worried because it was a simple matter of refreshing the page. Now when the GUI crashes because it is running in the same process as the calculation engine, that crashes also.
Details:
The calculation engine is now a web-page that spawns a number of web-workers. It also opens the GUI (a separate webpage) as a popup window and communicates to it using PostMessage.
The GUI typically needs to read ~ 500 floating point numbers / second (sent as JSON) from the calculation engine and write back ~ 5 numbers / second.
Yesterday I got excited because I discovered the SharedWorker API which I thought would accomplish was I wanted. Today however, I learned that recently modifications were made to Chrome so the SharedWorker actually runs in the same process as the attached tabs and it actually forces all the tabs attached to it into one process. Apparently it didn't used to do this. Does anyone know if there are any browser flags that I can set to revert to the old behavior?
I also have read a little bit about ServiceWorkers and other new APIs such as WebRTC. I have also played around with the storage APIs and thought that maybe they could be used to get two separate processes (tabs) to communicate at the rates that I need.
I want a solution that will work locally (using switches like --allow-file-access-from-files) and that doesn't require plugin installation (since even local plugins are blocked where I work).
NOTE: I saw some other similar questions but they didn't specifically address the need for there to be separate processes (only separate tabs)
Well, it looks like I figured out the answer already. The problem turned out to be how I was trying to open the GUI window.
I had a link on the calculation engine that the user clicked on to open the window:
Open GUI
However, it turns out that adding rel="noreferrer" will cause chrome to open the window in a new process.
Open GUI in new process
After I figured this out, the SharedWorker began to function as I had expected and I was able to keep by engine tab running even when the GUI tab crashed.
I'm currently looking for a good tool to profile javascript in browser. What problems i have with what I currently use:
Chrome - When I start profiling after reloading page, it takes infinity to load page. Not possible to finish
Firefox - Profiling with firebug is not easily readable (summary of each function in total). __For example
I'm looking for a profile, that would allow me to see not only how much time each function "ate". But analyze each call and subcalls.
Something simmiliar to KCacheGrind display.
If you can convert your app to the stand alone app, and if profiling on device is suitable for you, you can use Intel XDK and different profiling types under it. You can find out more info by this link: https://software.intel.com/en-us/html5/articles/using-the-profile-tab
The differences between CDT and XDK profilers are follow
CPU profiler - XDK is annotating source file by the time spent by the lines, not only call tree
Memory profiler - XDK profiler is more function centric and points which functions (call tree) allocate memory and annotate source view by the self and total memory allocated by the line. You can see bottom-up view and see the hotspot allocating more or switch to the callee view and analyze which high level function implicitly allocates a lot through library calls.
Here is a tool I wrote: http://yellowlab.tools
It spies and logs every JS access to the DOM on page load. Perfect tool to understand what's going on and to optimize browser-side JS performances.
Just launch a test then click the "JS Timeline" tab.
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 would like to see what the JavaScript interpreter is doing in real-time, which line it is reading and which function it is running, because I would like to make a full debug on every little piece of the JavaScript to make it faster. For this I need some tool to tell me what the interpreter is doing exactly, if it is defining a variable, if it's running a function, if it's in a loop, check the current intervals (defined in setInterval).
As far as I know Firebug can't do that.
Check out the javascript tab in Firebug, it's a full debugger. Set a break point and when your code hits that line you will have full debugging access to variables etc. Chrome has similar functionality in the developer tools which are included in a standard install.
If you're looking to do automated monitoring/analysis of your program, check out Chrome's Debugger Protocol. It provides a programatic API. I believe (but could be wrong) that this is what tools like Web Inspector and node-inspector are built on.
If you want something more than what the standard Firebug/Web Inspector interfaces are built on, you're going to have to either use something like this or start hacking on the internals of the V8 and Gecko JS interpreters.
As the other answer says,if you want to go step by step, setting a debug point is the way to go.
But since you seem interested in improving performance you might want to consider optimizing only the true bottlenecks in your application. To see which functions take the most to run, and other statistics you might want to take a look at console.profile() (available both in firebug and chrome).
Here is an example:
console.profile('myProfile');
//some code you want to know more about
console.profileEnd();
You can also start it manually by clicking the Profile button in the Console panel(in firebug)/ Profile panel (chrome)
In Chrome you might want to also take a look at Heap Snapshots (they tell you about memory usage).