Develop Reference

Slow javascript execution in IE11 until developer tools are enabled

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.

What is released when restarting an iOS device?

SHORT QUESTION
I have a bug that only disappears when I restart my device. I would like to know what is released when restarting an iOS device in order to have an idea about what my bug is.
Releasing my cache and my RAM don't help to fix my bug, so I wonder what else could be released that fix my bug for a short time.
CONTEXT
I have a web app using WebGL and BabylonJS. It works really fine on all devices and all browsers except on iOS. With Safari, I always end by having the error message "A problem occurred with this web page so it was reloaded".
It happened on an iPad Air 2 (2Go RAM) running iOS 10.3.3 but I saw the same bug on every iOS device I could have in my hands. That's why I consider it as iOS only related.
I'm aware about iOS resource limits : https://stackoverflow.com/a/22193143/5053300
I tried to debug this for months, the bug appears randomly, sometimes quickly, sometimes slowly. There's nothing consistent so it's totally impossible to debug.
The best guess is that it's a memory issue because crashs seem to appear faster each time. And because the error message is quite always linked to memory issues.
I suspect textures and renderTargetTextures to take more and more memory (but I don't understand why it wouldn't be released, I don't keep useless references).
But there's something I'm sure : when I restart my device, it always work the first time (until I reload once, then begins the downward spiral).
If I clean my cache (via settings -> Safari) and my RAM (pressing home button when we are in shut down screen), the bug is still here. But if I restart my device, it disappears.
Something in memory is released and I would like to know what.
But I also could be totally wrong and it could be something else than memory, I'm open to all your suggestions.
Thanks in advance, it drives me crazy for months !
UPDATE
This is what JS Heap looks like :
UPDATE 2
A scene asking for 90 renderTargetTextures (379x890) each frame does work on iOS.
My app does work if I don't ask for any renderTargetTextures. But it crashes more or less quickly if I only ask for one small renderTargetTexture each frame.
What conclusions can I get from this observation ? Does it corroborate or deny the idea of a memory issue ?
UPDATE 3
There's no clue the following code really is the cause of the issue, but commenting/uncommenting it generaly makes disappear/appear the bug.
var texture = generateTexture();
function generateTexture() {
var rt1 = new BABYLON.RenderTargetTexture("rt1", { width: scene.getEngine().getRenderWidth(), height: scene.getEngine().getRenderHeight() }, scene, false, true, scene.getEngine().TEXTURETYPE_UNSIGNED_BYTE, false);
rt1.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
rt1.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;
rt1.renderList.push(sphere);
rt1.onBeforeRender = function() {
sphere.material = std1;
};
scene.customRenderTargets.push(rt1);
return rt1;
}
I may insist on the fact that this code works in the link posted in update 2 so I don't think this code is relevant. The only thing is, commenting this part of the app seems to remove the random bug.
This code asks the 3D engine to render into one intermediary texture before to render to the screen. So this code impacts each frame.
In the link, I ask the engine to render into textures 90 times before to render to the screen.
UPDATE 4: PROBLEM SOLVED
The issue didn't depend on what is released on iOS restart, so I can't answer to my own question. But I can say that iOS doesn't like dynamic lighting.
From now on, all our projects will be limited to one light on iOS devices.
More lights, more computations each frame. It's too much for iOS that kills apps that ask for too much memory in a short time.

Without seeing your code I cannot guarantee any solution but I can offer some information about memory issues.
If you are sure that it never crashes on the first load, and it still crashes after clearing your device's memory, then it is unlikely to be a memory issue. That being said, if you are not sure of this, I would suggesting reading more about IOS memory usage. While the total memory for each device is known, the actual usable memory is much smaller. Furthermore, the memory shown in that post must be shared among all apps on the device, further limiting the memory availability.
I have found that even on a 2GB device, IOS will kill an app using ~200-300 MB of RAM because it was allocated too quickly. IOS takes both the amount and the speed of allocations into account when deciding whether or not to kill an app. Since each tab in Safari runs separately, it is likely that the same mechanism is at work. It is possible that your web app loads so much data into RAM so quickly that IOS refuses to carry out the request.
I would recommend reconsidering your assumptions about memory usage and profiling the app again after reading about the true memory limits of IOS. While it may not solve the issue, it will at least confirm whether memory is the issue.

why is this page crashing iOS?

http://bit.ly/Z7YPj7
It works fine on the desktop everywhere, and also on Android. But on the iPhone Simulator, the culprit appears to be in the file: js/the-anim36.js (which queues a whole bunch of Raphael SVG animations).
I'm monkeying around with Safari 6's "Develop" menu, which can now log info from the XCodes's iOS Simulator, which i downloaded and fired up. But I'm getting absolutely nothing in the javascript console, and a hard crash in the simulator each and every time I open the html file. I have to "Reset Content and Settings" each time I try to open the file. I'm frankly lost here, admittedly a novice at debugging in general (and also probably spoiled by Chrome.) Any pointers on what's possibly going on here would be very appreciated.

You can run out of memory really fast on iOS. Run it through the Chrome profiler and see what you're memory usage looks like. I bet it's using > 10mb of ram. In which case you're probably toast!
Check out this informative article, that claims after about 6mb of ram, you will crash mobile safari:
http://cubiq.org/testing-memory-usage-on-mobile-safari

I observe that when I open that page my laptop fan run on high. The thing is consuming a lot of CPU (and likely a lot of RAM) and may simply be exceeding the allowable resource limits on iOS. If not running out of RAM it could be causing the foreground process to run too long, triggering the logic that cancels "looping" apps.

Chrome Dev Tools very slow to respond in large web app

I have a large, javascript heavy web app that I am working on. I am experiencing very slow response times from Chrome Dev Tools for XHR responses and console loggging (3-5 secs). The actual app is running fast and responsive, only dev tools looks like it is suffering.
Does anyone have any idea why Chrome Dev Tools is becoming sluggish as my app grows?

Devtools are like any other debugger; they hook into the normal processing flow of an application, and store quite a bit more information than is normally required. This is much more work than simply rendering the page without debugging enabled, so it will indeed be slower.
That said, 3 seconds to respond to console.log seems high. I'd suggest that you first test the application in a nightly version of WebKit. If it's responsive in WebKit, but not in Chrome, please file a bug against the inspector via http://new.crbug.com/ along with any information you can provide about what scenario causes the slowness.
If it's equally sluggish in WebKit, please file a bug against WebKit's Inspector component: https://bugs.webkit.org/enter_bug.cgi
Either way, post the bug ID here, and I'll see that it's triaged into the correct team.

I "fixed" the slow chrome developer tool by (under SOURCES tab)
clearing the "watch" list that accumulated over time...
clearing all the "snippets", i had dozens as well...
Not sure which of both made the most difference, but it certainly made a difference

This is an old question, but it may help someone landing here later like I did.
Using Chrome 46.x/47.x on Linux (RHEL 7), none of the proposed solutions worked for me. What did work was to disable the setting "Use hardware acceleration when available", in the advanced browser settings.
I noticed in the process monitor/list that the Chrome renderer was taking up a lot of CPU, even putting a breakpoint or stepping throught statements in the debugger would take 10+ seconds!
Might be worth a shot.

Undock the developer tools into separate window.
In my case, it's work.

I struggled with this also, to the point where stepping through code using the chrome debugger was just so slow it took hours away from my productive development time. In watching the CPU utilization when debugging in chrome I would see it use up to as much at 40% of all 4 cores of my processor. I tried everything to no avail. Finally, I tried making the browser window of the page I was debugging as small as I could without losing any of the required view and miraculously it solved the problem. So, now I keep my debugger window popped out in a separate window, and make the window of the page I am debugging as small as I can and my debugging experience is very fast again. I have tested this over a period of weeks and it has held out. Hope this helps someone.

browser (javascript) resource problems

I've lately been running into odd issues, which I'm starting to think are related to resource starvation in the browser.
In FF:
I'd been testing one of our web apps and suddenly things that should disappear after a couple seconds stopped disappearing. I tracked back to setTimeout just flat out refusing to work. After reloading the browser it was all clear, no issues.
In IE:
I regularly see issues where IE will refuse to do transparency all the sudden, simply reloading the page clears this up.
In both:
Though I can't say its related for sure, I see unexplainable behavior, things along the lines of variables not being available (undefined) when they should be.
Both browsers also show a steady increase in memory usage over time (memory leaks).
The javascript in the web app is heavy and it is a single load page (making those memory issues mentioned all the more painful). There are lots of in-efficiency, and various things that make one say "why would you do that?".
Has anyone encountered such things? Can you point out general resources that will help identify and resolve these issues?

You could try running your application against the Chrome Profiler http://code.google.com/chrome/devtools/docs/overview.html. You can profile the CPU and get snapshots of the browser heap, that should help locate any rogue stuff.

If your application is designed to work with the Internet Explorer: The Developer Toolbar also has a profiler.