0

这是我在这个网站上的第一个问题，所以如果任何关于规则的内容听起来有点缺乏经验，我提前道歉（不过我已经快速阅读了它们。）

无论如何我的问题。

我在 SharePoint 2010 中构建了一个自定义菜单，它使用 UL 并通过 CSS 和一些 JQuery 进行自定义。

它看起来正是我想要的样子，并且在 IE8、FF 和 Chrome 中表现出色。我已经在我们这里拥有的一台旧的慢速机器上对其进行了测试，它运行良好。

当我在安装了 IE7 的机器上进行测试时，就会出现问题。由于某种原因，当悬停在顶部菜单项上时，它的运行速度非常缓慢。

我才刚刚开始学习 JQuery（上周），所以我希望我的代码完全错误。

以下代码减慢了它的速度：

$("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).children('ul').length < 1)
    {
      $("UL.SIDGlobalNav .LISIDCurrentSelected ul, UL.SIDGlobalNav .SIDCurrentSelectedParent  ul").css('visibility', 'hidden');
    } 
  }
})

我将解释为什么存在代码，以便它帮助您更多地理解我的想法。

该菜单是带有下拉菜单的选项卡样式菜单。当从菜单或其中一个孩子中选择一个标签时，将提高选项卡，并且可见下降线上的菜单项。

当用户将鼠标悬停在另一个菜单选项卡上时，我已将 JQuery 设置为删除当前选定的选项卡并隐藏下拉栏。

如果这有帮助，我可以提供图像吗？

任何关于它为什么会发生的指针都非常受欢迎。

先感谢您。

富有的

4

3 回答 3

2

IE6 和 IE7 的 JavaScript 性能总体上很差；IE8 好（2 倍），但仍远远落后于竞争对手。IE9(beta) 的 JavaScript 性能应该与竞争对手一样好或更好。

另一个问题是IE（无论如何<= 8）没有getElementsByClassName方法。所以当你给它一个基于类的 CSS 选择器时，JQuery 必须完成所有工作，它不能依赖（快速）本机浏览器功能。

尝试尽可能少地评估节点选择器；如果您可以缓存'UL.SIDGlobalNav .LISIDCurrentSelected, UL.SIDGlobalNav .SIDCurrentSelectedParent'结果集并对其进行子选择，它应该运行得更快。

于 2011-01-31T17:34:39.307 回答
0

众所周知，IE 对 sprite 有严重的缓存问题。发生此减速问题时，请检查浏览器发出的 HTTP 请求数。每次运行 jquery 时，您都可能会发出大量获取图像的请求。

如果不是这样，我可以帮助您深入研究一些性能优化，以降低 JavaScript 运行时开销。

于 2011-01-31T17:17:52.393 回答
0

试试这个。

$("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');
    }
});

我已经更改了第一个选择，因此它不会查看 sub ul，这否定了第一个 if 语句的需要。

于 2011-01-31T17:21:32.743 回答