IE fonctionne lentement lors du traitement de javascript par rapport à FF et Chrome

Question

J'essaie de résoudre pourquoi IE est lente lente de traitement de ce javascript par rapport à Chrome et FF. Dans Chrome et FF, il n'y a pas de délai pour les événements onclick mais dans IE il fait une pause de 5 secondes avant de faire quoi que ce soit.

Voici le lien vers le code que je cours.

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

J'utilise ceci pour mettre en évidence les zones de texte de couleur avec des erreurs. Cela fonctionne très bien, pas d'erreurs mais juste si lent.

Answer 1

Je ne sais pas trop comment cela s'appelle car il semble que vous utilisiez ASP pour faire ce travail (et je ne connais pas ASP). Mais ce qui ressort de moi est que vous avez var inputControl = document.getElementById(Page_Validators[i].controltovalidate); à l'intérieur de deux boucles distinctes.

Plusieurs appels à document.getElementById pour les mêmes éléments ont été la cause de nombreux problèmes de performances JavaScript. Envisager de combiner SetValidatorCallouts et ClearValidatorCallouts pour réduire le nombre d'appels à document.getElementById (que je suis assez sûr est plus lent dans IE, mais ne peut pas trouver de repères pour le moment). Je ne dis pas que cela va garantir une mise à jour massive de la vitesse, mais 1) vaut le coup d'œil, et 2) une bonne pratique pour la programmation JavaScript. Quelque chose comme:

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; 
} 

En note, vos fonctions de modification className sont trop compliquées. Je suggère d'utiliser un framework standard (jQuery, Dojo, ExtJs, etc). Sinon, envisagez de remplacer par les méthodes suivantes, plus simples. Ceux-ci ne vont pas nécessairement accélérer votre code, mais ils le rendront plus facile à maintenir, d'autant plus que j'ai remarqué que vous avez déjà des conditions spéciales pour gérer les bugs dans 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; 
} 

Un petit exemple de ce:

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); 

Answer 2

Peut-être parce qu'il doit invoquer un ActiveX pour se connecter au script côté serveur. Dans l'endroit où je travaille, nous avons abandonné le support IE pour nos applications Web. Meilleure solution à trouver;)

Answer 3

Il est difficile de regarder le script et de dire pourquoi il est lent. La meilleure façon de vérifier est d'exécuter des instructions de journal de temporisation pour voir quelle partie de celle-ci est lente. Si vous avez IE8, vous pouvez utiliser l'excellent outil de profilage qui l'accompagne.