我用jquery重写了我的菜单处理,突然间我的菜单显然需要更长时间才能打开。使用原生JS,按下触发器后立即播放开始幻灯片动画,jQ在菜单打开前需要一整秒。我将所有代码都移回原生代码,但这是我用于开放的基本功能。
jQuery版本:
$("#apis_trigger").click(function() {
$("#apis_menu").switchClass(dstart, dend);
$("#apis_trigger .down_arrow").css("transform", "scaleY(-1)");
});
原生JavaScript:
document.getElementById("apis_trigger").onclick = function() {
document.getElementById("apis_menu").classList.remove(dstart);
document.getElementById("apis_menu").classList.add(dend);
document.querySelector("#apis_trigger .down_arrow").style.transform="scaleY(-1)";
}
我只是查询选择器和切换类,所以我没想到这种性能受到打击。
阅读此帖后,我知道了性能损失
当我们使用简单的$('选择器')
时,这是jquery经历的代码量
但是从阅读其他线程我认为只会在较大的脚本中显而易见。
仅供参考我在i7 2.3ghz w / 9gb ram上运行Chrome浏览器。
答案 0 :(得分:1)
switchClass默认情况下会对所有属性执行400 ms的动画。您应该使用$(“#apis_menu”)。removeClass(dstart).addClass(dend)进行“公平”比较。
- Yury Tarabanko 5分钟前