problema Mootools quando ingrandita

Question

Sto usando Mootools ampiamente per un sito che sto sviluppando. Ma di recente ho notato un problema che le animazioni rallentano un sacco quando ho Zoom (utilizzando i browser Zoom In) in nel sito. Quale potrebbe essere un possibile motivo per questo problema? O è questo problema toccata nel Mootools sé. Questo accade in Chrome 6.0.472 così come Firefox 3.6.8.

Grazie, Nitin

Answer 1

molte cose sono sbagliate qui per quanto riguarda le ottimizzazioni di velocità.

permette di dare un'occhiata a questo codice di passaggio del mouse che sembra rallentare:

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

, ovviamente, questo funzionerà come fa ma è così molto sbagliato non so da dove cominciare.

l'idea è di astratte e di impostazione Le operazioni ripetitive in modo che siano fatte come una tantum.

considerare riga per riga il codice di cui sopra:

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

questo è sbagliato per un MooTools applicazione in ogni caso, si avrebbe bisogno di essere this.getFirst().setStyle("left", 0);

la this.getFirst() è una ricerca, dovrebbe essere memorizzato nella cache -. Anche se questo non è uno lento

poi viene la parte cattiva.

è possibile selezionare tutti i div bambino 3 volte e tutte le portate per due volte, in cui nessuna selezione dovrebbe essere applicabile. MOLTO COSTOSO

di reimpostare le opzioni Fx.morph ogni evento mouseover dove non ci sono modifiche (anche se sembrano avere una durata diversa per MouseEnter e mouseLeave - questo è costoso)

considerare questo codice:

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

si farà risparmiare un sacco di elaborazione sugli eventi.

Allo stesso modo, ci sono un sacco di posti in cui non si è in realtà utilizzando l'API MooTools.

document.getElementById(curr).style.cursor="pointer"; $(this).removeEvents -> senza bisogno di $, questo non è jQuery. document.getElementById("lightbox").style.visibility="hidden"; m=setTimeout('gallery()',5000); -> utilizzare la var timer = (function() { ... }).delay(5000); mootools, non usare le stringhe con setTimeout / intervallo di quanto costringe Kit e rimborsi ma le funzioni di anon puri

ecc ecc

Si può davvero fare una giornata di refactoring tutto questo e che lo rende 'bello', ma sarà valsa la pena.

Inoltre, conoscere il concatenamento

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

questo sta chiamando un selettore di 3 volte. invece è possibile:

1. memorizzarlo. var ribbon = $("ribbon"); ribbon.set...
2. Catena esso. $("ribbon").set("morph", {duration: 500}).morph({top:-10}).addEvents() - Metodi mootools elementi tendono a tornare l'elemento originale in modo da poter prendere la risposta dell'ultima funzione e si applicano più ad esso
.

1 è meglio per leggibilità, 2 è più veloce da fare.

anche. avete troppi variabili globali che rende il vostro ricerche a catena di portata più costosi, questo influenzerà molti alti di chiamata e luoghi. cercare di namespace correttamente, se è necessario l'accesso reali vars globali dalle funzioni e le chiusure, utilizzare window.varname ecc ecc

Un altro possibile miglioramento qui potrebbe essere l'uso della delega evento (bubbling evento causerà eventi di accendere l'albero DOM ai genitori, MooTools ha un API per trattare con esso in modo da poter aggiungere eventi singolari di elementi padre e non hanno per collegare gli eventi nnn a tutti i bambini) - guardare in su.

P.S. Si prega di non prendere questo in modo sbagliato - non è destinata a spazzatura il vostro lavoro ed è solo un po 'di costruttivo (spero) consigli che possono aiutare a portarlo al livello successivo. buona fortuna:)

Answer 2

Non ho visto alcun codice specifico in MooTools o di qualsiasi altra libreria che controlla se il browser è lo zoom durante l'animazione, quindi penso che l'animazione rallenta, dal momento che il browser utilizza più CPU per il calcolo processo di zoom.