Mootools problem when zoomed in

Question

I am using Mootools extensively for a site which I am developing. But recently I noticed a problem that the animations slow down alot when I zoom (using the browsers Zoom In) in into the site. What could be a possible reason for this problem ? Or is this problem inherit in Mootools itself. This happens in Chrome 6.0.472 as well as Firefox 3.6.8.

Thanks, Nitin

Answer 1

many things are wrong here with regards to speed optimisations.

lets take a look at this mouseover code that seems to slow down:

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

obviously this will work as it does but it's so very wrong i don't know where to begin.

the idea is to abstract and setup the repetitive tasks so they are done as a one off.

consider line by line the code above:

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

this is wrong for a mootools app anyway, it would need to be this.getFirst().setStyle("left", 0);

the this.getFirst() is a lookup, it should be cached - although that's not a slow one.

then comes the bad part.

you select all child divs 3 times and all spans twice, where NO SELECTION should be applicable. VERY EXPENSIVE

you reset the Fx.morph options every mouseover event where there are no changes (although you seem to have a different duration for mouseenter and mouseleave - this is expensive)

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

it will save a lot of processing on the events.

similarly, there are plenty of places where you are not really using the mootools api.

document.getElementById(curr).style.cursor="pointer"; $(this).removeEvents -> no need for $, this is not jquery. document.getElementById("lightbox").style.visibility="hidden"; m=setTimeout('gallery()',5000); --> use the mootools var timer = (function() { ... }).delay(5000);, don't use strings with setTimeout/interval as it forces eval and reflows but pure anon functions

etc etc.

you really can make a day out of refactoring all this and making it 'nice' but it's going to be worth it.

also, learn about chaining

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

this is calling up a selector 3 times. instead you can:

1. store it. var ribbon = $("ribbon"); ribbon.set...
2. chain it. $("ribbon").set("morph", {duration: 500}).morph({top:-10}).addEvents() - mootools element methods tend to return the original element so you can take the response of the last function and apply more to it.

1 is better for readibility, 2 is faster to do.

also. you have way too many global variables which makes your scope chain lookups more expensive, this will affect many call ups and places. try to namespace properly, if you need to access real global vars from functions and closures, use window.varname etc etc.

Another possible improvement here would be the use of event delegation (event bubbling will cause events to fire up the dom tree to the parents, mootools has an api to deal with it so you can add singular events to parent elements and not have to attach nnn events to all children) - look it up.

P.S. please don't take this in the wrong way - it's not meant to rubbish your work and it's just some constructive (i hope) advice that can help you bring it to the next level. good luck :)

Answer 2

I haven't seen any specific code in MooTools or any other library that checks if browser is zooming during animation, so I think that animation slows down, since browser using more CPU for computing zooming process.