我的jQuery明显比本机JS慢

Question

我用jquery重写了我的菜单处理，突然之间，我所有的菜单似乎都需要更长的时间才能打开。使用本机JS，按下扳机后立即播放开场幻灯片动画，使用jQ需要整整一秒钟才能打开菜单。此后，我已将所有代码移回本机代码，但这是我用于打开的基本函数。

j查询版本：

$("#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使用一个简单的$('selector'(时所经历的代码量。

http://james.padolsey.com/jquery/#v=1.10.2&fn=init

但是通过阅读其他线程，我认为这只有在较大的脚本中才会明显。

仅供参考，我在 i7 2.3ghz w/9gb 内存上的 Chrome 上运行它。

Answer 1

switchClass 默认对所有属性执行 400 毫秒的动画处理。您应该使用 $("#apis_menu"(.removeClass(dstart(.addClass(dend( 进行"公平"比较。

– 尤里·塔拉班科 5分钟前