Question

I’m working on a client-side webapplication that makes heavy use of JavaScript and Ajax to provide the required functionality.

This is not a problem for most browsers (Chrome, Firefox, …), but in Internet Explorer the performance is a major issue.

It takes less than a second to load the page initially, even on Internet Explorer. But upon refreshing the page it can take anywhere between 1 and 20 seconds to load and display the page.

It’s hard to post code since the application is divided into multiple files. I can only explain the intended behaviour.

The application initializes two content containers, one for static content and one for dynamic content. Each of these content containers is populated via Ajax and affects DOM elements via the innerHTML attribute.

The first time it takes less than a second to build the page. Subsequent refreshes take significantly longer.

What changes between the initial loading of the page and the refreshing of the page to explain this enormous performance drop? Do I need to uninitialize something on unloading the page?

Communication.request = function (method, target, async, data, callback) {
    var types = ['string', 'string', 'boolean', 'null', 'null'];                // Parameter types

    if (data) {                                                                 // Data was provided
        types[3] = 'string';                                                    // Data must be a string
    }

    if (callback) {                                                             // Callback was provided
        types[4] = 'function';                                                  // Callback must be a function
    }

    if (Utils.hasParams(arguments, types)) {                                    // All the required parameters were provided and of the right type
        var request = new XMLHttpRequest();                                     // Create a new request

        request.open(method, target, async);                                    // Open the request

        if (callback) {                                                         // Callback was provided
            request.handleCallback(callback);                                   // Register the callback
        }

        if (data) {                                                             // Data was provided
            var contentType = 'application/x-www-form-urlencoded';              // Prepare the content type

            request.setRequestHeader('Content-Type', contentType);              // Add a content type request header
        }

        request.send(data);                                                     // Send the request
    }
};

Answer 1

The problem appeared to be related to the amount of concurrent connections. Depending on the connection / type of web server this is limited to 2 or 4 concurrent connections in Internet Explorer.

After clamping the number of connections to 2 the problem ceased to occur. Other browsers appear to have higher limits, though I have limited those to 4 just in case.

Also, the amount of concurrent messages is the amount of messages in-flight at any given time. This was previously unlimited and that made Internet Explorer quite sad 🙁