Question

我正在广泛使用Mootools来开发我正在开发的网站。但最近我注意到一个问题，当我缩放（使用浏览器放大）进入网站时，动画减慢很多。这个问题可能是什么原因造成的？或者这个问题是否继承在Mootools本身。这种情况发生在Chrome 6.0.472以及Firefox 3.6.8中。

谢谢，尼丁

Answer 1

关于速度优化，这里有很多问题。

让我们来看看这个似乎放慢速度的鼠标悬停代码：

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

显然这会起作用，但是它非常错，我不知道从哪里开始。

这个想法是抽象和设置重复性任务，所以它们一次性完成。

逐行考虑上面的代码：

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

这对于mootools app来说是错误的，它需要this.getFirst().setStyle("left", 0);

this.getFirst()是一个查找，它应该被缓存 - 虽然这不是一个缓慢的。

然后是不好的部分。

您选择所有子div 3次，所有跨度两次，其中NO SELECTION应适用。 非常昂贵

你重置Fx.morph选项每个mouseover事件没有变化（虽然你似乎有一个不同的mouseenter和mouseleave持续时间 - 这是昂贵的）

考虑这段代码：

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

它将为事件节省大量处理。

同样地，有很多地方你没有真正使用mootools api。

document.getElementById(curr).style.cursor="pointer"; $(this).removeEvents - ＆gt;不需要$，这不是jquery。 document.getElementById("lightbox").style.visibility="hidden"; m=setTimeout('gallery()',5000); - ＆gt;使用mootools var timer = (function() { ... }).delay(5000);，不要使用带有setTimeout / interval的字符串，因为它会强制eval和reflows但是纯粹的anon函数

等等。

你真的可以通过重构这一切并让它变得“美好”来度过一天，但这将是值得的。

另外，了解链接

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

这是调用选择器3次。相反，你可以：

存储它。 var ribbon = $("ribbon"); ribbon.set...
链接它。 $("ribbon").set("morph", {duration: 500}).morph({top:-10}).addEvents() - mootools元素方法倾向于返回原始元素，因此您可以获取最后一个函数的响应并对其应用更多。

1更易于阅读，2更快。

也。你有太多的全局变量会使你的范围链查找更加昂贵，这将影响许多调用和地方。尝试正确命名空间，如果你需要从函数和闭包中访问真正的全局变量，请使用window.varname等。

这里的另一个可能的改进是使用事件委托（事件冒泡会导致事件将dom树激发给父母，mootools有一个api来处理它，所以你可以添加单个事件给父元素而不是将nnn事件附加到所有孩子身上） - 查找它。

P.S。请不要以错误的方式采取这种做法 - 这并不意味着要废弃你的工作，这只是一些建设性的（我希望）建议，可以帮助你将它提升到一个新的水平。祝你好运：）

Answer 2

我没有在MooTools或任何其他库中看到任何检查浏览器在动画期间是否缩放的特定代码，因此我认为动画速度变慢，因为浏览器使用更多CPU来计算缩放过程。

放大时的Mootools问题

2 个答案: