IE11的XMLHttpRequest表现非常缓慢

Question

我有一个使用Angular Material的SPA网站，在Chrome、Firefox和Edge上表现非常好，但在IE11中严重滞后。

我知道Angular Material在IE11中存在动画和样式问题，并进行了一些改进以提高该区域的性能（禁用动画，甚至删除它们ing等）。

但是，即使这些改进略微改善了应用程序，我仍然可以看到在加载资源时出现严重滞后，每个请求都需要花费很长（真的很长）时间才能被处理。我已经检查过服务器，响应时间始终在毫秒范围内（就像在Chrome中一样），但在IE11中却要花费很长时间。

请检查IE11的加载网络时间。

与Chrome相比。

有任何想法是什么导致了这个问题吗？

谢谢！

- pedromarce

---

@Mistalis 老式浏览器IE和Netscape之间的浏览器大战带给我们很多东西，这并不是最糟糕的......如果你没有接触过document.all和document.layers，那你就错过了真正有趣的事情。 - epascarello

你的IE开发工具中的黄色代表什么？如果是TTFB，那么你的服务器是否对来自IE的请求有任何不同的处理方式？ - noppa

@pedromarce 我也遇到了类似的问题。你能多说一点你发现了什么吗？你是否成功找到了一个令人满意的解决方案？ - paul

@pedromarce 不，我正在使用jQuery。但这足以提示我将DOM操作与ajax:success函数分离（使用setTimeout）。然后我尝试在构建结果时减少对DOM的访问。看起来情况有所改善。 - paul

@pedromarce 那些网络选项卡的截图似乎不够相等，无法进行真正的比较。我建议您隔离单个XHR调用，并在所有其他资产加载完成后逐步添加并行异步请求，因为您只怀疑XHR。 - bhantol

Answer 1

我会将真正的操作系统调试器附加到浏览器上，并尝试确定IE是否实际上正在开启一个线程来执行XHR。这是一项困难的调查，但它可以解释很多问题。

大多数浏览器都会这样做，然后将回调和数据传回到主UI线程。但IE已经过时，我不知道它会怎么做。

另一个想法是，我们那个缓慢移动的大公司终于放弃了IE支持，让我们能够编写具有Promise的良好代码而无需使用Polyfill。我们的代码库正在逐渐清理其他奇怪的Polyfill，这是我们随着时间推移获得的。

长期以来，我们不能编写for (var key in thing)，因为列表中会出现Polylfill。

您可以考虑与客户讨论此事。从"Edge或Firefox怎么样"开始谈起，您可以谈论其他被替换的事情。您更新手机和笔记本电脑……浏览器呢？

最重要的是祝你好运。

- cbuteau

---

我想补充一点，像IE11这样的老旧、不受支持的浏览器没有更新来利用服务器上实施的新安全功能（例如内容安全协议头）。继续支持IE11，我们就是在让我们的客户在互联网上以不安全的方式运作，他们遭受财务损失（可能还有我们公司）的几率很高。 - Andy

这是一个难以解决的问题。 对我来说，当人们固执己见直到有人提出新的想法时。 我们最终让一个大客户使用了FireFox并且我们能够停止支持其他浏览器。 但是浏览器平台有时仍然存在问题。 - cbuteau

Answer 2

您可以使用Microsoft ETL日志深入挖掘http网络

• 创建一个文件夹C:\msfiles

• 以管理员身份打开cmd

• 输入命令netsh trace start InternetClient_dbg capture = yes maxsize = 450 filemode = circular persistent = yes overwrite = yes traceFile = C:\msfiles\Etl_trace.etl

• 执行您想要的实际网络问题操作

• 使用命令netsh trace stop停止跟踪

->现在您有了Etl_trace.etl

使用IE和Chrome各执行一次，然后比较日志...

- Ziv Adler

Answer 3

在Chrome中5-6毫秒似乎是太短的时间来进行实际的服务器调用。如果我们在两个截图中看到的是相同的网络调用（不清楚是否是这种情况），那么Chrome更可能使用了缓存响应，而IE正在进行网络调用。请检查您的缓存标头，并确保您使用的是IE可以理解的标头。

- redab

Answer 4

此问题源于 Internet Explorer 浏览器的 AJAX 请求配置。

执行以下本地更改：

进行以下本地策略更改：

转到 Windows 组件 > Internet Explorer > 安全功能 > AJAX 启用“允许本机 XMLHTTP 支持”。 将“每个主机的最大连接数（HTTP1.1）”更改为 16。 将“每个服务器的最大连接数（HTTP1.0）”更改为 16。

此外，大多数公司都已经停止支持 IE。没有人想为一个没人使用的东西编写 polyfills，为什么你要使用 IE？请回复我，我想知道。

- Swapnil Sharma

Answer 5

看起来像是XMLHttpRequest正在排队，然后批量执行，从本质上讲阻塞了每个请求，直到某个内部进程一次性发送它们。

我要调查的第一个地方是IE有（文档不好）关于同时允许多少个XMLHttpRequest和浏览器请求的内部限制。在旧版本中，这个数字是2，但在IE8左右增加到6，具体取决于IE认为您的网络速度有多快的可怕且不可靠的内部指标。IE11仍然这样做，但限制更高。

我猜你已经达到了这个限制，一旦达到它，IE中管理批处理的内部计时器检查将在发送另一组到服务器之前花费1-2秒。

为了测试这个假设：只需在IE11中添加100毫秒的等待时间（它只需要足以限制并行请求的数量）即可在发送每个请求之前。它仍然会非常慢，但如果内部批处理是原因，您将不会在请求块上看到1-2秒的延迟。

如果这是问题，解决方法可能是自己进行某种批处理，以尝试避免达到IE的容量，但由于它是动态的，我怀疑这将是对小于1.5％的用户而言不成比例的痛苦。

- Keith

Answer 6

你可能需要调查XMLHttpRequest是否被拦截。虽然现代浏览器对此的性能惩罚较小，但对于IE来说，用JS函数交换本机调用会在一定程度上影响其使用，并随着使用量的增加而扩大。这适用于各种polyfills和扩展功能。

- lotype

Answer 7

根据您的屏幕截图，看起来可能存在“CORS Preflight”请求瓶颈...也许这个https://developer.akamai.com/blog/2015/08/17/performance-single-page-apps可以为您解释一个可行的解决方案。

此外，我建议您查看一下应用程序为什么会发出大量的OPTION请求，除非这是有意为之，否则您的应用程序会进行多次往返，每次都会延迟下一次请求，并且由于并发连接的限制，您最终会消耗池并阻止进一步的请求...

通过IE的网络选项卡，了解网络上正在发生的事情将会很有趣...

- rexfordkelly

Answer 8

我在IE中遇到了AngularJS的类似问题，我们追踪到这是由于IE的安全更新（KB2962872）引起的。卸载该补丁将性能恢复到正常。

- Blackfish

---

你能详细说明一下吗？因为通常情况下，网站没有权利卸载其他人计算机上的安全更新。（即，您认为该更新中的哪些内容是有问题的，并且您如何确认它确实是该更新引起的问题，而不仅仅是卸载它并说“现在速度更快了”，这并不能帮助我们理解潜在的问题） - Mike 'Pomax' Kamermans