在IE11中执行缓慢的javascript,直到启用开发人员工具

时间:2018-02-02 10:05:12

标签: javascript performance internet-explorer-11 asm.js

我有一个非常大的javascript应用程序,它主要包含asm.js代码(它是基于urho3d c ++引擎构建的,它们被编译成asm.js)。

它在大多数浏览器(chrome,firefox,safari,edge)上都运行良好,但在IE11上却非常慢。问题是,在打开开发人员工具之前,它只会很慢。随着开发人员工具的打开,IE11的速度提高了约10倍,几乎和其他浏览器一样快。

以下是重现问题的最小示例:
http://test.sebbia.com/urho3d/test.html
在任何正常工作的浏览器中打开页面,“运行 - 开始”消息和“运行 - 完成”消息之间的时间应该在1-2秒左右。
在没有开发者工具的情况下在IE11中打开页面,时间应该在35-50秒左右 打开开发人员工具并重新加载,时间应该在2-3秒左右。

另一个重要的注意事项是,如果我在开发人员工具中开始分析会话,性能会下降,就像开发人员工具已关闭一样。所以我实际上可以描述问题。但是我花了几个小时进行分析,并且我尝试在大函数中插入日志消息,但我没有发现瓶颈。所有函数的执行时间大致相同,如果我在大函数的中间插入日志消息,它们通常会分成两个相似的部分。因此没有单一的函数负责减速,代码执行速度很慢。位移,函数调用,算术运算 - 与开放式开发人员工具相比,它们似乎只占用了太多时间。

我真的需要让我的应用程序在IE11上工作,并且它与开发人员工具打开的事实让我发疯。我试图找到一种方法让IE认为工具即使不工作也是开放的,或通过任何其他方式获得良好的性能。所以我的问题是如何在没有实际手动打开工具的情况下打开开发人员工具来实现与IE11相同的性能

这是一个非常广泛的问题,所以我想将其分解为几个较小的问题:

  1. 有没有办法让IE11认为开发人员工具是开放的?也许有一些类似x-ua兼容的元标记我不知道了?

  2. 当开发人员工具关闭时,导致速度放缓的原因是什么?我听说在IE8和9上没有开发者工具的情况下console.log函数调用很慢,也许在IE11上有类似的东西?也许asm.js没有优化?如果我知道造成这种情况的原因,我至少可以尝试重写代码以避免这种情况。

  3. 有没有办法从javascript代码打开开发人员工具?也许我可以要求用户按网站上的按钮“让应用更快”。要求他们按F12或导航设置似乎太多了。

3 个答案:

答案 0 :(得分:7)

启用调试器后,asm.js编译将禁用,执行将回退以执行正常JS - 您可以看到console.log在执行开始的这些方面。

Edge中的

asm.js has been disabled as the script debugger is connected. Disconnect the debugger to enable asm.js.

Firefox中的

asm.js type error: Disabled by debugger

虽然当您尝试使用Chrome时,Chrome将无法在调试器中打开01_HelloWorld.js

禁用IE中的调试器(调试器选项卡,套接字符号;左起第八个),从而启用asm.js将允许您打开开发工具但看到执行速度较慢。我有一种可怕的感觉,调试器关闭时的减速实际上只是IE11的asm.js优化速度问题。

有很多关于IE11的参考资料对asm.js进行了优化。 caniuse.com甚至将IE11列为不支持asm.js

https://caniuse.com/#feat=asmjs

这似乎得到了微软自己的支持:

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/asmjs/

肯定会有一些支持,但很明显它有许多速度问题,如许多基准所示,例如:

https://github.com/Kukunin/asm.js-benchmark/blob/master/README.md

这显示IE11比其他浏览器慢10倍左右,或者:

https://www.ghacks.net/2014/11/03/massive-benchmark-highlights-asm-js-performance-of-web-browsers/

基于:

https://kripken.github.io/Massive/ - 你可以亲自试试。

还有很多其他人。可能只是因为asm.js的IE11实现非常糟糕,以至于它比它没有它的速度慢得多。

编辑:添加了Microsoft平台状态链接。

答案 1 :(得分:1)

此问题有两种解决方法:

  1. setInterval(30000, () => {}) 添加到您的初始化函数中;
  2. MutationObserver=null 添加到主 html 的开头

你也可以参考这里的讨论: https://github.com/OfficeDev/office-js/issues/521

答案 2 :(得分:0)

这只是一个猜测,但我在反应原生中遇到了类似的问题,然后我发现了这个:

  

远程调试时,你的js包使用chrome的JSC和什么时候   在设备上运行,它正在手机上使用Apple提供的JSC。

确保在开发人员工具开启/关闭时urho3d不会改变环境。