The speed of XMLHttpRequest in Internet Explorer 11 is severely lacking

My angular material SPA website runs smoothly on Chrome, Firefox, and Edge, but experiences significant lagging on IE11.

I am aware of the issues related to angular material animations and styles in IE11, and have already made several modifications to enhance the overall performance (such as disabling animations and removing theming).

Despite these improvements, I still notice a considerable delay when loading resources in IE11. Each request seems to take an exceptionally long time to process, even though the server response time remains in the milliseconds range (similar to Chrome).

Please take a look at the network load times for IE11: https://i.sstatic.net/7JJMz.png

Compare this with Chrome: https://i.sstatic.net/tmxRy.png

Any insights into what may be causing this issue?

Thanks,

Answer №1

One approach could be to connect a genuine OS debugger to the browser and investigate whether IE is spawning a thread to handle the XHR request. This may shed light on the issue at hand.

While most browsers delegate callbacks and data handling to the main UI thread, IE's behavior remains somewhat of a mystery due to its age.

It's worth noting that our company recently decided to drop support for IE, allowing us to write cleaner code with promises without relying on polyfills. As a result, we are slowly phasing out other unnecessary polyfills from our codebase.

When discussing browser compatibility with customers, consider suggesting alternatives like Edge or Firefox. Just as you update your phone and laptop regularly, why not consider updating your browser as well?

Above all, best of luck in addressing these challenges.

Answer №2

It is worth delving into the possibility that XMLHttpRequest may be intercepted. Although modern browsers incur a smaller performance penalty for this, in the case of IE, replacing native calls with JS functions does have an impact to some extent and is proportional to its usage. This phenomenon extends to various polyfills and added functionalities.

Answer №3

After reviewing your screenshots, it appears that the bottleneck may be related to the excessive "CORS Preflight" Requests. You may find a helpful workaround in this article: .

Additionally, it's important to investigate why your application is generating numerous OPTION requests. If not intentional, these requests can lead to delays and limited concurrent connections, causing a backlog of pending requests.

Examining the network activity through IE's network tab could provide valuable insights into what's happening behind the scenes.

Answer №4

It appears that the XMLHttpRequest requests are lining up and then executing all at once, causing a delay in processing each request.

One possible issue to explore is that Internet Explorer has undocumented limits on how many concurrent XMLHttpRequest and browser requests it can handle simultaneously. In earlier versions, this limit was 2 but it increased to up to 6 around IE8 based on some internal metric related to network speed. Even in IE11, this limitation still exists but with a higher threshold.

It is likely that you have reached this limit, resulting in a delay of 1-2 seconds before batches of requests are sent to the server due to an internal timer check.

To test this theory in IE11, introduce a 100ms delay before sending each request. This will slow down the process, but if the issue lies with internal batching, you should not experience the 1-2 second delays between request batches.

If this turns out to be the problem, a potential solution could involve implementing your own batching system to prevent hitting IE's maximum capacity. However, since this cap is dynamic, it may require significant effort for a small percentage of users.

Answer №5

It appears that the 5-6 ms server call time in Chrome may be too brief for an actual network request to be made. If we are comparing the same network calls in both screenshots (which is uncertain), it is probable that Chrome is retrieving a cached response while IE is making a fresh network call. Check your caching headers and ensure they are compatible with IE's requirements.

Answer №6

The root of this issue can be traced back to the configuration settings within the Internet Explorer browser that affect AJAX requests.

To address this locally, follow these steps:

Implement the following policy modifications:

Go to Windows Components > Internet Explorer > Security Features > AJAX Turn on 'Allow native XMLHTTP Support'. Adjust the 'Maximum number of connections per host (HTTP1.1)' to 16. Modify the 'Maximum number of connection per server (HTTP1.0)' to 16.

In addition, many companies have stopped supporting IE altogether. The need for creating polyfills for an obsolete browser like IE is diminishing. It begs the question: why are you still using IE? Feel free to respond, I'm curious to know.

Answer №7

To uncover more information about the http network, consider delving into Microsoft ETL logs.

Start by creating a folder named C:\msfiles
Next, open an elevated cmd window as Administrator
Run the command netsh trace start InternetClient_dbg capture = yes maxsize = 450 filemode = circular persistent = yes overwrite = yes traceFile = C:\msfiles\Etl_trace.etl
Perform the network action relevant to the issue you are investigating
When you have captured enough data, stop the trace using the command netsh trace stop

-> You will now have the Etl_trace.etl file in your specified location.

Repeat the process once with Internet Explorer and once with Google Chrome, then compare the logs for further analysis.

Answer №8

Encountered a problem with AngularJS while using Internet Explorer After investigation, we discovered that the issue was caused by a security update (KB2962872) for IE. Restoring performance to its usual state was achieved by uninstalling that particular patch.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying arrays in ReactJS

Having trouble editing my array list, need some help. I can update a single input value successfully, but struggling with updating the entire array. Any suggestions on why the method isn't working and how to edit the array? When I try to store data ...

javascript reactjs

NVD3 struggling with handling oversized data

I am facing a major issue with the implementation of a graph using NVD3. It appears that NVD3 struggles to handle datasets containing large values. The graph in question can be viewed at: . The code snippet for the graph is provided below: nv.addGraph(fun ...

javascript graph d3.js stacked-area-chart nvd3.js

Create animated changes in height for a mdDialog as elements are shown or hidden

Utilizing Angular Material, I have implemented tabs within an md-dialog. The dialog smoothly adjusts its height based on the content of the active tab during navigation. However, when utilizing an ng-if directive to toggle visibility of content, there is n ...

css angularjs angular-material

"Encountering an issue with AngularJS controller code not executing properly in Internet Explorer

Thank you for taking the time to check this out. I'm experiencing an issue with my AngularJS code that seems to be functioning perfectly in all web browsers except for IE9. Surprisingly, even IE8 is working fine, but not IE9. An example of this prob ...

angularjs internet-explorer-9

Different Ways to Customize Button Click Events in Angular 9 Based on Specific Situations

In my Angular 9 web application development, I frequently need to integrate Bootstrap Modals like the example below: <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="do ...

javascript angular bootstrap-4

Utilizing Mongoose Schema Enums Alongside TypeScript Enums

In our Typescript-based NodeJs project utilizing Mongoose, we are seeking the right approach to define an enum field on a Mongoose schema that aligns with a Typescript enum. To illustrate, consider the following enum: enum StatusType { Approved = 1, ...

javascript node.js typescript mongodb mongoose

Unable to invoke a function within a JavaScript class

As I develop a THREE.js graphics program, I am looking to create a BodyPart class in Javascript that includes various methods. However, I have encountered an issue where I am unable to successfully call these methods. Despite the code displaying 'call ...

javascript three.js method-call

Issue encountered: Module 'jasmine-expect' not found [Protractor]

I am facing an issue while trying to execute a protractor test that connects to my application. Upon running the command (git bash/terminal): protractor conf.js An error is displayed as follows: " Error: Cannot find module 'jasmine-expect&apo ...

angularjs selenium-webdriver npm protractor git-bash

Adjust the URL dynamically depending on the class in PHP

Something unique has come up with one of my clients - they want to switch the primary logo when scrolling down the page. Initially, the top logo should be displayed, then as the user scrolls, a second logo should take its place. To achieve this effect, I ...

javascript php wordpress

Having trouble changing the value of a field within an object stored in an array in JavaScript/TypeScript?

I'm wrestling with what seems to be a straightforward issue, but for some reason I can't update the pos field value in the WorkSetTemplate object within an array. Here's the code snippet: export class WorkSetTemplate { static alignPosit ...

javascript typescript

What steps should I take to repair my jQuery button slider?

I am facing a challenge with creating a carousel of three images in HTML using jQuery. When the user clicks on the "Next" or "Previous" buttons, I want to scroll through the images one by one. However, I am struggling to hide the other images when one is d ...

javascript jquery html css slider

What is the best way to generate a "JSON diff" that can be displayed in the JavaScript console?

When working on my Angular project, I frequently encounter the need to compare JSONs in my Karma/Jasmine tests. It would be incredibly useful to have a console output showing what has been added and removed when comparing two structures. For example, ident ...

javascript json angularjs karma-jasmine

I am looking to utilize jQuery to dynamically update a selected checkbox through AJAX

I've been struggling to make my ajax json script update my HTML checked box with the value from the database, but so far I haven't had any luck. Any assistance would be greatly appreciated! Here's the JS code snippet: setInterval(functi ...

javascript jquery html json ajax

Creating a dropdown menu within a <span> element with JavaScript

Snippet of HTML: <body onload="init();firstInit();"> Snippet of JavaScript: function init(){ var tb = new Ext.Toolbar({ renderTo: 'toolbar', height: 25 }); var ht='<table><tr>'; ht+='<td>&apo ...

javascript html

steps for retrieving final outcome from forkJoin

I am currently working with an array of userIds, such as: ['jd', 'abc']. My goal is to loop through these userIds and retrieve full names using an API. Ultimately, I aim to transform the initial array into [ {userId: 'jd', nam ...

javascript angular rxjs

Replicate the styling of CSS class A and apply it to class B

Let's take a look at some code: <button id="test" class="ui-state-hover" value="Button"> In Context: I'm utilizing the JQuery UI CSS class ui-state-hover on an HTML button to ensure it always appears as if it's being hovered over. H ...

javascript jquery html css

Guide to positioning an element directly following the initial line of a title

I am attempting to position an HTML element beside the first line of a heading. To clarify, I have taken screenshots to illustrate the current appearance and desired outcome. Current Appearance: Desired Outcome: In order to change the background of the ...

javascript html css

What methods can be used to prevent external URLs from being crawled by using hashing?

Recently, I came across a post on a coding forum discussing how to hide links from Google using JavaScript. The idea is to mask the URLs from being crawled by Google while still making them accessible to users. In my case, I have external URLs that I want ...

javascript vue.js vuejs2 nuxt.js

Locating function definitions in etags using Emacs

I find syntax check in js2-mode to be quite effective. However, there are times when I wish to name a function "delete" or "new" even though it may not be the best practice. Js2-mode often flags this as an error. Is there a way to use built-in keywords as ...

javascript node.js emacs syntax jslint

I am constantly reminded by React hooks to include all dependencies

Imagine I am using useEffect to pre-fetch data upon initial rendering: function myComponent(props) { const { fetchSomething } = props; ... ... useEffect(() => { fetchSomething(); }, []); ... ... } My linter is warni ...

javascript reactjs react-hooks

JavaScripter Q&A