Mootools Problem, wenn gezoomt

Question

Ich verwende Mootools ausgiebig für eine Website, die ich entwickeln werde. Aber vor kurzem bemerkte ich ein Problem, dass die Animationen verlangsamen viel, wenn ich heran (mit den Browsern Vergrößern) in in die Website. Was könnte ein möglicher Grund für dieses Problem sein? Oder ist dieses Problem nicht erben in Mootools selbst. Dies geschieht in Chrome 6.0.472 sowie Firefox 3.6.8.

Danke, Nitin

Answer 1

gibt viele Dinge falsch hier in Bezug auf Geschwindigkeit Optimierungen.

lässt einen Blick auf diesen Code Mouseover nehmen, die zu verlangsamen scheint:

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

offensichtlich dies funktionieren wird, wie es funktioniert, aber es ist so sehr falsch ich weiß nicht, wo man anfangen soll.

Die Idee ist, zu abstrahieren und das Setup die sich wiederholende Aufgaben, so dass sie als ein aus fertig sind.

Sehen Sie Zeile für Zeile den Code oben:

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

das ist falsch für ein Mootools App trotzdem, es müßte this.getFirst().setStyle("left", 0);

sein

die this.getFirst() ist ein Nachschlag, sollte es im Cache gespeichert werden. - aber das ist nicht ein langsamer

dann kommt der schlechte Teil.

Sie alle Kind divs 3 Mal wählen und alle Spannweiten zweimal, wo keine Auswahl anwendbar sein sollte. sehr teuer

setzen Sie die Fx.morph Optionen jedes Mouseover-Ereignis, wo es keine Änderungen (obwohl Sie scheinen eine andere Dauer für MouseEnter- und mouseleave zu haben - das ist teuer)

Sehen Sie diesen Code ein:

[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'
            });
        }
    });
});

es wird eine Menge von Behandlungen auf die Ereignisse speichern.

ähnlich, es gibt viele Orte, wo man nicht wirklich die Mootools api verwenden.

document.getElementById(curr).style.cursor="pointer"; $(this).removeEvents -> keine Notwendigkeit für $, dann ist dies jquery nicht. document.getElementById("lightbox").style.visibility="hidden"; m=setTimeout('gallery()',5000); -> verwenden, um die Mootools var timer = (function() { ... }).delay(5000);, verwenden Sie keine Strings mit setTimeout / Intervall, wie es Kräfte Evaluierungs- und aufschmilzt, sondern reine Anon Funktionen

etc etc.

Sie können wirklich ein Tag machen aus all diesen Refactoring und machen es ‚nett‘, aber es wird es wert sein.

auch, lernen über Verkettungs

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

Dies ist ein Selektor 3 Mal aufrufen. stattdessen können Sie:

1. lagern. var ribbon = $("ribbon"); ribbon.set...
2. ketten es. $("ribbon").set("morph", {duration: 500}).morph({top:-10}).addEvents() - Mootools-Elemente-Methoden neigen dazu, das ursprüngliche Element zurück, so dass Sie die Antwort der letzten Funktion übernehmen und anwenden können mehr zu bieten
.

1 ist besser für bessere Lesbarkeit, 2 schneller zu tun ist.

auch. Sie haben viel zu viele globale Variablen, die Ihre Scope-Chain-Lookups verteuert, dies viele Call-ups und Orte auswirken wird. versuchen, richtig zu Namespace, wenn Sie den Zugriff auf Echt globale Variablen von Funktionen und Verschlüssen müssen, verwenden window.varname etc etc.

Eine weitere hier möglich, eine Verbesserung der Nutzung der Veranstaltungs Delegation wäre (event sprudelnden werden Ereignisse bewirken, dass die DOM-Baum zu den Eltern feuern, hat Mootools eine api damit zu umgehen, so dass Sie singuläre Ereignisse zu übergeordnete Elemente hinzufügen und nicht haben nnn Veranstaltungen für alle Kinder zu befestigen) - schauen sie.

P. S. Bitte nehmen Sie diese nicht in der falschen Art und Weise - es ist nicht dazu gedacht, um Ihre Arbeit zu Müll und es ist nur eine konstruktive (hoffe ich) Beratung, dass Sie es auf die nächsten Ebene bringen kann helfen. Glück:)

Answer 2

Ich habe keinen spezifischen Code in MooTools oder jede andere Bibliothek gesehen, dass überprüft, ob Browser während der Animation zoomt, so denke ich, dass Animation verlangsamt, da Browser zur Berechnung Zoomprozess CPU.