jQuery更改可见性浏览器性能问题

-1

我有一个关于jQuery和JavaScript性能的问题。我的应用程序正在使用的布局，多个选项卡，并在它们之间进行切换，我写了这个代码：jQuery更改可见性浏览器性能问题

function openTab(id, holder) { 
    $("#" + holder).children(".tab").addClass("visHidden"); 
    $("#" + id).removeClass("visHidden"); 
    $("#"+holder+" .tab-nav").removeClass("tab_navAkt"); 
    if (/^\d*$/.test(id)) {         
     $("#"+holder+" ." + id).addClass("tab_navAkt"); 
    } 
}

它这样做是：增加了类visibility:hidden所有选项卡，然后删除标签这个类，我想看看然后它将选项卡控件元素设置为活动状态（如果需要的话）。我的问题是，这段代码在Firefox或Chrome中大约需要3ms，在Internet Explorer 7中大约需要500ms 8？标签中的平均数据大小为500kb，我认为这并不是太多。难道我做错了什么？

来源

2012-04-24 user1352324

这或许应该被迁移到[代码审查（http://codereview.stackexchange.com/）站点。 – Sparky 2012-04-24 18:13:45

我的猜测是这是导致问题的正则表达式。此外，您可以使用.show()和.hide()来重写。

$("#" + holder).children(".tab").hide(); 
    $("#" + id).show().addClass("tab_navAct");

来源

2012-04-24 17:59:30 dstarh

但我读过一篇关于show/hide的文章，它说显示/隐藏比改变类更慢 – user1352324 2012-04-24 19:41:46

看着src它只是设置可见性的本地属性，所以我怀疑它比addClass https：// github慢。 com/jquery/jquery/blob/master/src/effects.js＃L18 – dstarh 2012-04-24 21:18:16

好吧，它不是，它改变了显示属性，它更慢，因为它改变了页面布局和浏览器hav来保存隐藏元素的数据再次恢复他们。根据这篇文章http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance – user1352324 2012-04-25 05:08:11

与FF和Chrome在JavaScript执行中相比，IE通常要慢一些。但是，您可以优化您的代码并尝试在IE中的性能。尝试这个。

function openTab(id, holder) { 
    var $holder = $("#" + holder); 
    $holder.children(".tab").addClass("visHidden"); 
    $("#" + id).removeClass("visHidden"); 
    $holder.find(".tab-nav").removeClass("tab_navAkt"); 
    //you can get rid of this check. jQuery will addClass only if it finds the element 
    //if (/^\d*$/.test(id)) {         
     $holder.find(" ." + id).addClass("tab_navAkt"); 
    //} 
}

来源

2012-04-24 18:01:03 ShankarSangoli

jQuery更改可见性浏览器性能问题

回答

相关问题