IE runs slow while processing javascript compared to FF and Chrome

Question

Hey everyone,

I am trying to troubleshoot why IE is slow slow processing this javascript compared to Chrome and FF. In Chrome and FF there is no delay for any onclick events but in IE it pauses for like 5 seconds before doing anything.

Here is the link to the code i am running.

http://geekswithblogs.net/ptahiliani/archive/2009/08/13/highlighting-textbox-on-error-using-required-field-validator.aspx

I am using this to highlight the color textboxes with errors. It works great, no errors but just soooo slow.

Answer 1

May be its because it has to invoke an ActiveX to connect server side script. In the place I work we dropped IE support for our WebApplications. Best solution yet to be found ;)

Answer 2

It is hard to look at the script and say why it is running slow. Best way to check is to run put some timer log statements to see which part of it is running slow. If you have IE8, you can use the excellent profiler tool that comes with it.

Answer 3

I don't know much about how this is getting called since it looks like you're using ASP to do that work (and I don't know ASP). But what stands out to me is that you have var inputControl = document.getElementById(Page_Validators[i].controltovalidate); inside of two separate loops.

Multiple calls to document.getElementById for the same elements has been the culprit of many JavaScript performance issues. Consider combining SetValidatorCallouts and ClearValidatorCallouts to reduce the number of calls to document.getElementById (which I'm pretty sure is slower in IE, but can't find any benchmarks at the moment). I'm not saying this will guarantee a massive speed update, but it's 1) worth a shot, and 2) a good practice for JavaScript programming. Something like:

var SetValidatorCallouts = function() {
    var pageValid    = true,
        inputControl = null;

    for ( var i=0; i<Page_Validators.length; i++ ) {
        inputControl = document.getElementById(Page_Validators[i].controltovalidate);              

        if ( !Page_Validators[i].isvalid ) {
            if ( pageValid ) {
                inputControl.focus();
            }

            addClass(inputControl, 'error');
            pageValid = false;                                                    
        } else {
            removeClass(inputControl, 'error');
        }
    }                   

  return pageValid;
}

As a side note, your className modification functions are overly complicated. I would suggest using a standard framework (jQuery, Dojo, ExtJs, etc). Otherwise, consider replacing with the following, simpler methods. These wont necessarily speed up your code, but they will make it easier to maintain, especially since I noticed that you already have special conditions to handle bugs in WebForm_RemoveClassName.

var removeClass = function(element, className) {
    // Simply split on white space and remove the specified class
    var classes = element.className.toLowerCase().split(/\s+/);
    var result  = "";
    className   = className.toLowerCase();

    for ( var i in classes ) {
        if ( classes.hasOwnProperty(i) && classes[i] != className ) {
            // Extra spaces at the end don't matter.  I have yet to see a
            // browser that cares about superfluous whitespace in classes
            result += classes[i] + " ";
        }
    }
    element.className = result;
}

var addClass = function(element, className) {
    // Extra spaces affect nothing, don't bother trying to make 
    // the className attribute perfect.
    element.className += " " + className;
}

A little example of that:

var fakeElement = {
    className: "foo-asdf asdf asdf-foo foo-asdf-asdf fooasdf asdffoo fooasdfasdf asdf fooasdffoo" 
};

console.log(fakeElement.className);
removeClass(fakeElement, "asdf");
console.warn(fakeElement.className);