problème Mootools lorsque zoomé

Question

J'utilise Mootools largement pour un site que je développe. Mais récemment, je remarqué un problème que les animations ralentissent beaucoup quand je zoom (en utilisant les navigateurs Zoom In) dans dans le site. Ce qui pourrait être une raison possible de ce problème? Ou est-ce Hériter de problème 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 sont mal ici en ce qui concerne la vitesse Optimisations.

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 fonctionne comme il le fait, mais il est tellement mal que je ne sais pas par où commencer.

l'idée est d'abstraire et de configuration les tâches répétitives afin qu'ils se font une fois seulement.

considérer 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);

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

est alors la mauvaise partie.

vous sélectionnez tous les divs enfants 3 fois et toutes les portées deux fois où aucune sélection devrait être applicable. très 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érer 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'
            });
        }
    });
});

il permettra d'économiser beaucoup de traitement sur les événements.

De même, il y a beaucoup d'endroits où vous n'êtes pas vraiment en utilisant les Mootools api.

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 le Mootools var timer = (function() { ... }).delay(5000);, ne pas utiliser des chaînes avec setTimeout / intervalle comme il forces et eval fonctions pures, mais les remboursements anon

etc etc

vous pouvez vraiment faire une journée de refactorisation tout cela et le rendre « agréable », mais ça va valoir la peine.

aussi, en savoir plus sur enchaînant

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

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

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

1 vaut mieux pour readibility, 2 est plus rapide à faire.

aussi. vous avez trop de variables globales qui rend votre chaîne de recherches de portée plus cher, cela affectera de nombreux appels ups et des lieux. essayez de namespace correctement, si vous avez besoin d'un accès réel vars globales de fonctions et fermetures, utilisez window.varname etc etc

Une autre amélioration possible serait ici l'utilisation de la délégation de l'événement (bouillonnement d'événement provoquera des événements pour tirer l'arbre dom aux parents, Mootools a un api pour y faire face afin que vous puissiez ajouter des événements singuliers aux éléments parents et ne pas avoir pour attacher des événements nnn à tous les enfants) - chercher.

P.S. S'il vous plaît ne prenez pas cela dans le mauvais sens - il est pas censé rubbish votre travail et il est juste un peu constructif (je l'espère) des conseils qui peuvent vous aider à amener au prochain niveau. bonne chance:)

Answer 2

Je ne l'ai pas vu un code spécifique à 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, car navigateur en utilisant plus de CPU pour le processus de zoom calcul.