My custom JQuery code is causing IE7 to run very slow but not other browsers

This is my first ever question on this site so I apologise in advance if anything sounds a little inexperienced regarding the rules (I have quickly read them though.)

Anyway on to my problem.

I have built a custom menu in SharePoint 2010 which uses UL's and is customised via CSS and some JQuery.

It looks exactly how I want it to and performs great in IE8, FF & Chrome. I have tested it on a old slow machine we have here and it works fine.

The issue arises when I test this on a machine which has IE7 installed. For some reason when hovering over the top menu items it's runs extreemly slowly.

I am only just beginning to learn JQuery (in the last week) so I expect I have done something completely wrong with my code.

It is slowed by the following code:

$("ul.SIDGlobalNav li:not(ul.SIDGlobalNav li ul li)").mouseenter(function() {
  if ($(this).is(':not(.LISIDCurrentSelected, .SIDCurrentSelectedParent)'))
  {
    $("UL.SIDGlobalNav .LISIDCurrentSelected div, UL.SIDGlobalNav  SIDCurrentSelectedParent div").css('backgroundPosition', 'left top');
    $("UL.SIDGlobalNav .LISIDCurrentSelected div a, UL.SIDGlobalNav .SIDCurrentSelectedParent div a").css('backgroundPosition', 'right top').addClass('tabdown');
    if ($(this).ch开发者_如何学JAVAildren('ul').length < 1)
    {
      $("UL.SIDGlobalNav .LISIDCurrentSelected ul, UL.SIDGlobalNav .SIDCurrentSelectedParent  ul").css('visibility', 'hidden');
    } 
  }
})

I will explain why the code is there so that it helps you understand my thinking a little more.

The menu is a tabs style menu with a dropline. When a tab from the menu or one of it's children is selected the tab is raised and the menu items on the dropline are visible.

When a user hovers over another menu tab I have set the JQuery to drop the current selected tab and hide the dropbar.

I can provide images if this helps at all?

Any pointer on why it might be happening is much appriciated.

Thank you in advance.

Rich

IE6 and IE7 have very bad JavaScript performance overall; IE8 is (2x) better, but still far behind the competition. IE9(beta) should have as good or better JavaScript performance as the competition.

An additional problem is that IE (<= 8 anyway) does not have a getElementsByClassName method. So JQuery has to do all the work when you give it a class based CSS-selector, and it cannot rely on a (quick) native browser function.

Try to evaluate the node selectors as few times as possible; if you can cache the 'UL.SIDGlobalNav .LISIDCurrentSelected, UL.SIDGlobalNav .SIDCurrentSelectedParent' result set, and do subselections on it, it should run a lot faster.

IE has been known to have severe caching issues with sprites. When this slowdown issue occurs, inspect the number of HTTP requests that are being issued by your browser. It could be the case that you're firing off a lot of requests to get images each time that jquery runs.

If that's not the case, I can help you dive into some performance optimizations to get your JavaScript runtime expenses down.

Try this out.

$("ul.SIDGlobalNav > li:not(.LISIDCurrentSelected, .SIDCurrentSelectedParent)").mouseenter(function(){
    $("UL.SIDGlobalNav .LISIDCurrentSelected div, UL.SIDGlobalNav .SIDCurrentSelectedParent div").css('backgroundPosition', 'left top');
    $("UL.SIDGlobalNav .LISIDCurrentSelected div a, UL.SIDGlobalNav .SIDCurrentSelectedParent div a").css('backgroundPosition', 'right top').addClass('tabdown');

    if ($(this).children('ul').length < 1)
    {
        $("UL.SIDGlobalNav .LISIDCurrentSelected ul, UL.SIDGlobalNav .SIDCurrentSelectedParent  ul").css('visibility', 'hidden');
    }
});

I have changed the first select so it doesn't look in to the sub ul, which negates the need of the first if statement.