Question

我有一个关于jQuery和JavaScript性能的问题。我的应用程序使用带有多个选项卡的布局并在它们之间切换，我编写了这段代码：

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的类添加到所有选项卡，然后从我想要查看的选项卡中删除此类，然后将tab-control元素设置为活动（如果需要）。我的问题是，这段代码在Firefox或Chrome中大约需要3毫秒，在Internet Explorer 7和大约500毫秒内大约需要500毫秒。 8？标签中的平均数据大小为500kb，我认为这并不算太多。难道我做错了什么？

Answer 1

与JavaScript执行中的FF和Chrome相比，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");
   //}
}

Answer 2

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

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

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

2 个答案: