13

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:

  1. 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?

  2. 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.

  3. 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.

Alexey
  • 7,262
  • 4
  • 48
  • 68
  • It took me ~50 seconds to see the "Run - finish" message on Chrome. – Tsvetan Ganev Feb 02 '18 at 10:11
  • @TsvetanGanev What OS and browser version are you running? Was it any better after realod? Maybe this is network problem - js + resource files are almost 8MB combined. – Alexey Feb 02 '18 at 10:13
  • 1
    Yes, it seems the problem is the slow initial download. On a second run it's ~20 secs. [18.471s] Run - start - [19.443s] Run - finish – Tsvetan Ganev Feb 02 '18 at 10:21
  • 1
    @TsvetanGanev Thank you, I've edited the question to mention that only time between "Run - start" and "Run - finish" matters - that's the actual time that browser spends executing the script. – Alexey Feb 02 '18 at 10:33
  • Running from cache: Chrome 63.0: 3 seconds, Firefox 58: 5.2 seconds, IE11 without devtools: 28.95 seconds, *with* Devtools: 4.2 seconds. (i7 2860QM, 16GB, Windows 7). This really is ridiculous... – Rob Feb 05 '18 at 08:53
  • Try debugger command to open dev tools https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger – Jonathan Chaplin Feb 05 '18 at 10:26
  • @JonathanChaplin unfortunately debugger; statement has no effect unless developer tools are already opened – Alexey Feb 05 '18 at 10:46
  • Took 2 seconds in firefox in kali linux – Munim Munna Feb 05 '18 at 15:07
  • Has any of available answers answered your question? :) – Michal Feb 13 '18 at 18:54
  • 1
    @Michal Unfortunately no. Perran Mitchell's answer looked very promising, but as I wrote in a comment below the answer it didn't work out in the end. – Alexey Feb 14 '18 at 12:16

3 Answers3

10

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.

Perran Mitchell
  • 1,148
  • 1
  • 10
  • 19
  • Yep, I does exactly what you said. Disconnecting the debugger slows it down as if the dev-tools were closed. – Munim Munna Feb 05 '18 at 19:56
  • 1
    That is a very good hypothesis but unfortunately it's probably incorrect. I've tested IE11 with and without "use asm" directive and difference is very insignificant (33 seconds without "use asm" and 34 seconds with it - maybe the sample size isn't big enough). So either IE11 uses some strange mechanic to enable asm js (I've tried removing all comments, renaming asm variables - same results) or it doesn't affect it at all. Just for fun, I've also tested Chrome and Firefox. Without asm.js, Chrome performance is improved by 20% and Firefox performance is decreased by 400%. – Alexey Feb 06 '18 at 09:19
  • @Alexey - Wow. The chrome / firefox stats are absolutely insane. I take your point about IE11 then - still, very odd that it appears to be specifically the debugger which speeds it up. I wonder if opening the debugger allows IE to use more system resources or something similar... – Perran Mitchell Feb 06 '18 at 10:11
1

There are two workaround for this issue:

  1. to add setInterval(30000, () => {}) to your initialization function;
  2. 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

Syscall
  • 19,327
  • 10
  • 37
  • 52
ginger jiang
  • 69
  • 6
0

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.

Michal
  • 4,952
  • 8
  • 30
  • 63