我的jQuery明显慢于原生JS

时间:2017-07-10 08:21:13

标签: javascript jquery

我用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经历的代码量      

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

但是从阅读其他线程我认为只会在较大的脚本中显而易见。

仅供参考我在i7 2.3ghz w / 9gb ram上运行Chrome浏览器。

1 个答案:

答案 0 :(得分:1)

  

switchClass默认情况下会对所有属性执行400 ms的动画。您应该使用$(“#apis_menu”)。removeClass(dstart).addClass(dend)进行“公平”比较。

- Yury Tarabanko 5分钟前