Problème Mootools lors d'un zoom avant

Question

J'utilise beaucoup Mootools pour un site que je développe. Mais récemment, j'ai remarqué un problème que les animations ralentissent beaucoup quand je zoome (en utilisant les navigateurs Zoom In) dans le site. Quelle pourrait être une raison possible à ce problème? Ou est ce problème hérité dans Mootools lui-même. Cela se produit dans Chrome 6.0.472 ainsi que Firefox 3.6.8.

Merci, Nitin

Answer 1

beaucoup de choses ne vont pas ici en ce qui concerne les optimisations de vitesse.

permet de jeter un oeil à ce code qui semble mouseover ralentir:

this.childNodes.item(1).style.left="0px"; 
this.getElements('div').setStyles({'opacity':'1'}); 
this.getElements('div').set('morph', {duration:'normal',transition: 'sine:out'}); 
this.getElements('span').set('morph', {duration:'normal',transition: 'sine:out'}); 
this.getElements('div').morph({'left':'-28px'}); 
this.getElements('span').morph({'left':'-30px','color':'#FFF'}); 

évidemment, cela fonctionnera comme il le fait, mais il est tellement mal que je ne sais pas par où commencer.

l'idée est de résumer et de mettre en place les tâches répétitives afin qu'elles soient effectuées de manière unique.

considèrent ligne par ligne le code ci-dessus:

this.childNodes.item(1).style.left="0px";

cela est faux pour une application Mootools de toute façon, il devrait être this.getFirst().setStyle("left", 0);

la this.getFirst() est une recherche, il devrait être mis en mémoire cache - Bien que ce ne soit pas lent.

vient ensuite la mauvaise partie.

Vous sélectionnez toutes les divs enfants 3 fois et toutes les portées deux fois, où AUCUNE SÉLECTION ne devrait s'appliquer. TRES CHER

vous réinitialiser les options Fx.morph chaque événement mouseover où il n'y a pas de changement (même si vous semblez avoir une durée différente pour mouseenter et mouseleave - cela coûte cher)

considèrent ce code:

[document.id("menu1"), document.id("menu2")].each(function(el) { 
    // use element storage to save lookups during events 
    el.store("first", el.getFirst()); 
    el.store("divs", el.getElements("div")); 
    el.store("spans", el.getElements("span")); 

    // store the fx.morph options once and for all, no need to do so 
    // on every event unless you are changing something 
    el.retrieve("divs").set("morph", { 
     duration: 'normal', 
     transition: 'sine:out', 
     link: 'cancel' 
    }); 

    el.retrieve("spans").set("morph", { 
     duration: 'normal', 
     transition: 'sine:out', 
     link: 'cancel' 
    }); 

    // add the events 
    el.addEvents({ 
     mouseenter: function(e) { 
      // retrieve the saved selectors from storage and do effects 
      this.retrieve("first").setStyle("left", 0); 
      this.retrieve("divs").morph({ 
       "left": -28 
      }); 
      this.retrieve("spans").morph({ 
       'left': '-30px', 
       'color': '#FFF' 
      }); 
     } 
    }); 
}); 

cela économisera beaucoup de traitement sur les événements.

De même, il y a beaucoup d'endroits où vous n'utilisez pas vraiment l'API mootools.

document.getElementById(curr).style.cursor="pointer"; $(this).removeEvents -> pas besoin de $, ce n'est pas jquery. document.getElementById("lightbox").style.visibility="hidden"; m=setTimeout('gallery()',5000); -> utiliser les Mootools var timer = (function() { ... }).delay(5000);, ne pas utiliser des chaînes avec setTimeout/intervalle comme force et eval fonctions pures, mais les remboursements anon

etc etc

vous pouvez vraiment faire une journée de refactoriser tout cela et le rendre «gentil» mais ça vaudra le coup.

aussi, en savoir plus sur enchaînant

$("ribbon").set('morph', {duration:'long',transition: 'bounce:out'}); 
$("ribbon").morph({'top':'-10px'}); 
$("ribbon").addEvents({ 

cette demande un sélecteur 3 fois. à la place, vous pouvez:

1. de l'enregistrer. var ribbon = $("ribbon"); ribbon.set...
2. le chaîner. $("ribbon").set("morph", {duration: 500}).morph({top:-10}).addEvents() - Les méthodes de l'élément mootools ont tendance à renvoyer l'élément d'origine afin que vous puissiez prendre la réponse de la dernière fonction et lui appliquer plus.

1 est meilleur pour la lisibilité, 2 est plus rapide à faire.

également. vous avez beaucoup trop de variables globales qui rendent vos recherches de chaînes de portée plus coûteuses, cela affectera beaucoup de commandes et de lieux. essayez d'espace de noms correctement, si vous avez besoin d'accéder à de vraies variables globales à partir des fonctions et des fermetures, utilisez window.varname etc.

Une autre amélioration possible ici serait l'utilisation de la délégation d'événements (le fait de faire des bulles provoquera des événements dom tree aux parents, mootools a une API pour y faire face afin que vous puissiez ajouter des événements singuliers aux éléments parents et ne pas avoir à attacher des événements nnn à tous les enfants) - regardez-le.

P.S. S'il vous plaît, ne prenez pas cela dans le mauvais sens - ce n'est pas fait pour nuire à votre travail et c'est juste un conseil constructif (je l'espère) qui peut vous aider à passer au niveau suivant. bonne chance :)

Answer 2

Je n'ai pas vu un code spécifique dans MooTools ou toute autre bibliothèque qui vérifie si le navigateur est le zoom pendant l'animation, donc je pense que l'animation ralentit, depuis le navigateur en utilisant plus de CPU pour le calcul processus de zoom.