Mootools放大时出现问题

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

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

然后是糟糕的部分。

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

你在每次鼠标悬停事件没有变化的情况下重置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 time = (function() { ... }).delay(5000);，不要将字符串与 setTimeout/interval 一起使用，因为它会强制 eval 和回流，但要使用纯匿名函数

等等等，

你确实可以花一天的时间来重构所有这些并使其变得“美好”，但这是值得的。

另外，了解链接，

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

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

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

1 的可读性更好，2 的执行速度更快。

还。你有太多的全局变量，这使得你的作用域链查找更加昂贵，这将影响许多调用和位置。尝试正确命名空间，如果您需要从函数和闭包访问真正的全局变量，请使用 window.varname 等。

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

PS，请不要以错误的方式理解这一点 - 这并不是要贬低您的工作，这只是一些建设性的（我希望）建议，可以帮助您将其提升到一个新的水平。祝你好运:)

Answer 2

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