1000+ UL 上的 JQuery 切换方法慢答案

【问题标题】：JQuery Toggle Method Slow on 1000+ UL1000+ UL 上的 JQuery 切换方法慢
【发布时间】：2009-08-04 22:28:20
【问题描述】：

我正在做一个项目，我正在构建一个树视图，在某些情况下，我的树可能有 1000 多个子节点。问题是它真的像 IE7 机器一样慢。

我没有做任何动画或任何事情，只是尝试使用 JQuery 的切换功能隐藏项目中的下一个 UL。有人对如何提高性能有任何想法吗？

谢谢！！

【问题讨论】：

您能否提供一些示例代码。不是全部 1,000，而是您正在使用的基本 ul 结构。
它只是典型的 ul li 结构，在 li's 中有嵌套 ul's

标签： javascript jquery performance jquery-ui

【解决方案1】：

如果切换速度很慢，你可以直接通过 jquery 设置 css 样式，例如：

$(".tree_item").click(function(){
  //check the next ul if it is expanded or not
  if(this.next('ul:hidden').length == 0){
    //if expanded hide it
    this.next('ul').css('display', 'none');
  }else{
    //if not shown, show it
    this.next('ul').css('display', 'block');
  }
});

这种方法会有所帮助。我不知道它是否会更快，但请尝试一下...

思南。

【讨论】：

我遇到了同样的问题，用我自己的 css setter 重写它，它快得多！

【解决方案2】：

如果你的树视图那么大，我一点也不感到惊讶。 Silverlight 3 使用 UI Virtualization 处理此问题。

您必须自己编写 javascript，但这不应该那么难。只需制作一个与渲染树大小相同的巨大空白 div，并将其放入可滚动的 div 中，然后仅渲染应显示的内容。在 onscroll 事件上更改它。

【讨论】：

【解决方案3】：

您可以尝试从 DOM 文档开始构建您自己的树对象。

只需遍历所有元素并将它们嵌套在标准属性和变量中。您可以使用$(element).get(0).parent = $(parent).get(0);

制作额外的父子指针

那么如果你想得到指定的元素使用$.map函数。

我们用它来准备项目中的萤火虫之类的东西。它在 3 秒内重建了所有 5000+ 个节点的门户，并在 ie6+ 上提供了快速访问

【讨论】：

好吧，信不信由你，它实际上是相当快地旋转通过所有这些子 LI 并设置一个 display:none，而不是只对父 UL 执行一次。有时候我讨厌 JS，不是吗？

【解决方案4】：

我发现 .toggle(showOrHide) 很快。它是在 jQuery 1.3 中添加的，如果不需要动画，它确实对 IE8 中的大型集合（50+ 元素）产生了影响。当前的可见性状态可以从第一个元素中获取，例如：

    var isVisible = $('.myClass').first().is(':visible');
    $('.myClass').toggle(!isVisible);

【讨论】：