Javascript 放大时出现问题

我正在为我正在开发的网站广泛使用Mootools。但最近我注意到一个问题，当我放大（使用浏览器放大）网站时，动画会慢很多。这个问题的可能原因是什么？或者这个问题是由Mootools本身继承的。这发生在Chrome6.0.472和Firefox3.6.8中

谢谢，

---

Nitin

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

关于速度优化，这里有很多地方是错误的

让我们看一看这段鼠标悬停代码，它似乎放慢了速度：

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次，选择所有跨距2次，其中不应使用任何选择非常昂贵

在没有更改的情况下，每次鼠标悬停事件都会重置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=（函数（）{…}）.delay（5000），不要使用带有setTimeout/interval的字符串，因为它强制执行eval和reflows，而使用纯anon函数

等等

你真的可以花一天的时间重构所有这些，让它变得“美好”，但这是值得的

另外，了解链接

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

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

保存它<代码>变量功能区=$（“功能区”）；ribbon.set…
锁链
$（“ribbon”）.set（“morph”，{duration:500}）.morph（{top:-10}）.addEvents（）
-mootools元素方法倾向于返回原始元素，因此您可以获取最后一个函数的响应并对其应用更多内容
1的可读性更好，2的速度更快

还有。您有太多的全局变量，这使得范围链查找更昂贵，这将影响许多调用和位置。如果您需要从函数和闭包访问真正的全局变量，请使用window.varname等

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

另外，请不要误解这一点——这并不是说你的工作是垃圾，这只是一些建设性的（我希望）建议，可以帮助你把它提升到一个新的水平。祝你好运：）
这是有道理的，所以这取决于动画的复杂性。我想说的是，确保在不考虑缩放（缓存、选择器、循环等）的情况下尽可能优化事情，然后希望缩放也不会产生如此糟糕的效果。大部分javascript都在一个名为mainjs.js的脚本中。你能给我一些优化的想法吗？我也试过在上面运行分析器。但它不起作用。我是一个刚开始的javascript程序员，所以我没有太多的想法。你已经用了12次$（“lamp”），把它移到变量中。一个很好的做法是，如果多次使用DOM元素，则存储对它们的引用。还要尝试从这个文件中删除内容（我指的是html），并将其与ajax或页面上的html标记放在一起。在这种情况下，调试和分析javascriptI将更容易。我建议将所有html内容从javascript文件放到html中，隐藏在隐藏元素中，并在需要时获取。在这种情况下，它也将被搜索机器人索引。我还注意到，您使用了许多全局变量，这些变量在所有文件中都在更改（例如，
内容
）。最好也避免这样做，因为这样会使调试变得更困难。非常感谢。将在今天对其进行重构。这真的很有帮助！！！！！我是新来MooTools的，所以你的帖子帮了我。很高兴能帮上忙。欢迎光临irc-irc://irc.freenodenet#mootools -大多数核心开发团队都在那里无所事事，并且经常有心情提供帮助。此外，还有一些很好的指南可以让你开始阅读，这样你在查看mootools项目时就有了更高的优势-检查