题

我正在广泛使用Mootools来开发的网站。但是最近，我注意到一个问题是，当我将（使用浏览器放大）放入网站中时，动画会减慢速度。这个问题可能是什么原因？还是这个问题继承在Mootool本身中。这发生在Chrome 6.0.472以及Firefox 3.6.8中。

谢谢，尼丁

有帮助吗？

解决方案

关于速度优化，这里的许多事情都是错误的。

让我们看一下似乎放慢速度的鼠标代码：

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应用程序是错误的，需要 this.getFirst().setStyle("left", 0);

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

然后是坏部分。

您选择了所有儿童Divs 3次，所有跨度都不适用，所有跨度都不适用。 非常贵

您可以重置fx.morph选项，每个鼠标事件都没有变化（尽管您似乎对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 - >不需要$，这不是jQuery。document.getElementById("lightbox").style.visibility="hidden"; m=setTimeout('gallery()',5000); - >使用Mootools var timer = (function() { ... }).delay(5000);, ，不要将字符串与Settimeout/Interval一起使用，因为它会迫使评估和反射，但纯粹的anon功能

等等等等

您确实可以从重构并将其“不错”的重构中度过一天，但这是值得的。

另外，了解链接

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

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

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

1更适合可读性，2更快。

还。您有太多的全球变量，这使您的范围链的查找更加昂贵，这会影响许多呼叫和地点。尝试正确命名空间，如果您需要从功能和闭合访问实际的全局var，请使用window.varname等。

这里可能的另一个可能的改进将是使用事件代表团（事件冒泡会导致事件向父母发射DOM树，Mootools有一个API来处理它，因此您可以将单数事件添加到家长元素中，而不必附加NNN所有孩子的活动） - 查找。

PS请不要以错误的方式接受这一点 - 这并不是要垃圾工作，而只是一些建设性的建议，可以帮助您将其提升到一个新的水平。祝你好运 ：）

其他提示

我在Mootools或任何其他库中都没有看到任何特定的代码，这些代码在动画过程中是否在浏览器中进行缩放，因此我认为动画会减慢，因为浏览器使用更多CPU用于计算缩放过程。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top