Question

我有一些调用jQuery函数，如14,000次......到底是什么？我没有那么多函数，真的只是简单的东西，如追加和删除DOM元素，为什么我的一些事件处理程序调用函数这么多次？

另外，为了解决我的问题，Firebug的分析器只显示了最小的函数名称......即使我使用未压缩的库，它也只显示init()或$.()

有没有人有任何技巧？

所以我知道这很多，但它似乎效率很低，它在我们的页面newgoldleaf.com上执行，有些功能需要大约50ms才能运行...是很长一段时间还是仅仅是我？ / p>

// prepare ajax for form posts
jQuery.ajaxSetup({
  "beforeSend" : function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})

// initializes panels and gets url hash, shows correct panel
jQuery.fn.initPanes = function() {
  $("div#main_content > div:not(.message)").addClass("inactive");

  var hash = window.location.hash.substr(1);
  this.each(function () {

    if ($(this).hasClass(hash)) {
      var panelToShow = "." + $(this).attr("class");
      $(panelToShow).removeClass("inactive").toggleClass("active");
    }
  });

  // if no hash found in url, activate first menu item   
  if (hash == "" ) {
    $(this).eq(0).activatePane(); 
  }

};

// shows panel when user clicks sidebar links
jQuery.fn.activatePane = function(pane) {

  if ($(this).hasClass("unavailable") == true) {
    return false;
  }

  if ($(this).hasClass("active") == false) {
    $("div#main_content > div:not(.message)").hide().removeClass("active").addClass("inactive");
    $(this).siblings().removeClass("active");
    var panelToShow = "div#main_content div." + $(this).attr("class");

    // set the hash in the url
    window.location.hash = $(this).attr("class");

    $(this).toggleClass("active");
    $(panelToShow).fadeIn("slow").removeClass("inactive").addClass("active");
  };
};

jQuery.fn.functionName = function() {

};

$(document).ready(function (){

  $('ul.examples li:not(img, h5, a)').hover(function (){
    var bubble = $(this).find("h5.bubble")
    bubble.animate({
      opacity:".99",
      bottom:"28px"
    }, 200);
  }, function (){
    var bubble = $(this).find("h5.bubble")
    bubble.animate({
      opacity:"0",
      bottom:"38px"
    }, 200).animate({
      bottom:"20px"
    }, 0);
  });


  // hide/show comment form for users with javascript
  $("div#comments_not_allowed").hide();
  $("form#new_comment").show();

  // $("body#index div.preview").slideShow();


  // error and flash notice animation
  $(".message").animate({
    opacity: "1",
  }, 2000).animate({
    opacity: "0",
  }, 2000).hide(500);

  // home page caption bubble for blog image fade in
  $("body#index h5.bubble").fadeIn("slow");
  $("body#index h5.bubble").animate({
    bottom: "22px",
    opacity: ".99"
  }, 1000);

  $("form#new_comment").submit(function() {
      $.post($(this).attr("action"), $(this).serialize(), null, "script");

    return false;
  });

  $("form#new_lead").submit(function() {
      $.post($(this).attr("action"), $(this).serialize(), null, "script");
    return false;
  });



  if ($("ul.panels").length > 0 ) {
    // panel animation
    $("div#aside ul li").initPanes();
    $("div#aside ul li").css({
      cursor:"pointer"
    });


    $("div#aside ul li").click(function () {
      $(this).activatePane();  
    });
  };

  $(document).load(function() {
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

    function startAnalytics() {
        var pageTracker = _gat._getTracker("UA-7434953-1");
        pageTracker._initData();
        pageTracker._trackPageview();
    }

    if (window.addEventListener) {
        window.addEventListener('load', startAnalytics, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onload', startAnalytics);
    }
  })


})

Answer 1

以下是一篇文章的链接，其中包含一些很好的提示：

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

以下是有关DOM操作的更多提示：

http://jquery-howto.blogspot.com/2009/02/5-easy-tips-on-how-to-improve-code.html

我还没有验证这些提示，但值得一试（没有看到您的代码）

Answer 2

This trick should find your problem大约一分钟。

分析jQuery，如何使我的应用程序更加活泼？

2 个答案: