放大时Mootools问题
-
02-10-2019 - |
题
我正在广泛使用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次调用选择器。相反,您可以:
- 存储它。
var ribbon = $("ribbon"); ribbon.set...
- 连锁它。
$("ribbon").set("morph", {duration: 500}).morph({top:-10}).addEvents()
-Mootools元素方法倾向于返回原始元素,因此您可以采用最后一个函数的响应并将其应用更多。
1更适合可读性,2更快。
还。您有太多的全球变量,这使您的范围链的查找更加昂贵,这会影响许多呼叫和地点。尝试正确命名空间,如果您需要从功能和闭合访问实际的全局var,请使用window.varname等。
这里可能的另一个可能的改进将是使用事件代表团(事件冒泡会导致事件向父母发射DOM树,Mootools有一个API来处理它,因此您可以将单数事件添加到家长元素中,而不必附加NNN所有孩子的活动) - 查找。
PS请不要以错误的方式接受这一点 - 这并不是要垃圾工作,而只是一些建设性的建议,可以帮助您将其提升到一个新的水平。祝你好运 :)
其他提示
我在Mootools或任何其他库中都没有看到任何特定的代码,这些代码在动画过程中是否在浏览器中进行缩放,因此我认为动画会减慢,因为浏览器使用更多CPU用于计算缩放过程。