mootools problema cuando se acerca

Question

Estoy usando Mootools ampliamente para un sitio que estoy desarrollando. Sin embargo, recientemente he notado un problema que las animaciones ralentizan mucho cuando el zoom (utilizando los navegadores zoom in) en en el sitio. Lo que podría ser una posible razón para este problema? O se trata de heredar un problema en sí mismo Mootools. Esto sucede en Chrome 6.0.472, así como Firefox 3.6.8.

Gracias, Nitin

Answer 1

Muchas cosas están mal aquí en lo que respecta a las optimizaciones de velocidad.

Vamos a echar un vistazo a este código al pasar el ratón que parece ir más despacio:

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

Obviamente esto va a funcionar como lo hace pero es tan mal que no sé por dónde empezar.

la idea es abstracta y configuración de las tareas repetitivas por lo que se realizan como un.

considerar línea por línea el código anterior:

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

esto está mal para un mootools aplicación de todos modos, que tendría que ser this.getFirst().setStyle("left", 0);

la this.getFirst() es una búsqueda, se debe almacenar en caché -. A pesar de que no es un proceso lento

A continuación viene la parte mala.

selecciona todos los divs niño 3 veces y todos los tramos dos veces, donde no hay selección debe ser aplicable. muy caro

restablecer las opciones Fx.Morph cada evento mouseover donde no hay cambios (a pesar de que parecen tener una duración diferente para MouseEnter y mouseleave - esto es caro)

considerar este código:

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

se ahorrará una gran cantidad de procesamiento de los eventos.

Del mismo modo, hay un montón de lugares donde usted no está realmente utilizando la API de mootools.

document.getElementById(curr).style.cursor="pointer"; $(this).removeEvents -> sin necesidad de $, esto no es jQuery. document.getElementById("lightbox").style.visibility="hidden"; m=setTimeout('gallery()',5000); -> usar el var timer = (function() { ... }).delay(5000); mootools, no utilice cadenas con setTimeout / intervalo ya que las fuerzas Kits y reflujos pero funciona anon puros

, etc, etc

que realmente puede hacer que un día fuera de la refactorización todo esto y lo que es 'agradable' pero va a valer la pena.

También, aprender acerca de cómo encadenar

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

esto se llama un selector de 3 veces. En su lugar puede:

1. almacenarlo. var ribbon = $("ribbon"); ribbon.set...
2. Cadena ella. - $("ribbon").set("morph", {duration: 500}).morph({top:-10}).addEvents() métodos mootools elementos tienden a devolver el elemento original, por lo que puede tener la respuesta de la última función y aplicar más a él
.

1 es mejor para legibilidad, 2 es más rápida de hacer.

también. usted tiene demasiadas variables globales que hace que su búsquedas cadena de ámbito más caro, esto afectará a muchas subidas de llamadas y los lugares. tratar de espacio de nombres correctamente, si necesita un acceso real VARs globales de funciones y cierres, etc, etc utilizar window.varname

Otra posible mejora en este caso sería el uso de la delegación de eventos (burbujeo evento causará eventos para encender el árbol DOM para los padres, mootools tiene una API para tratar con él para que pueda agregar eventos singulares a los elementos primarios y no tener adjuntar eventos nnn a todos los niños) - mirar hacia arriba.

P.S. Por favor, no tome esto en el camino equivocado - no está destinado a escombros su trabajo y que es sólo un poco constructiva (espero) consejos que pueden ayudarle a llevarlo al siguiente nivel. buena suerte:)

Answer 2

No he visto ningún código específico en MooTools o cualquier otra biblioteca que comprueba si el navegador es el zoom durante la animación, así que creo que la animación se ralentiza, ya que el navegador usando más CPU para computar proceso de zoom.