Question

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

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

谢谢！

Answer 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');
  }
});

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

思南。

Answer 2

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

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

制作其他父指针和子指针

然后，如果您想获取指定的元素，请使用$.map函数。

我们用它来为项目准备像firebug这样的东西。它在3秒内重建了所有5000多个节点门户，并提供了对ie6 +

的快速访问

Answer 3

如果你的树视图很大，我并不感到惊讶。 Silverlight 3使用UI Virtualization处理此问题。

你必须在javascript中推广自己，但它不应该那么难。只需创建一个巨大的空白div，其大小与渲染树的大小相同，并将其置于可滚动的div中，然后仅渲染应显示的内容。在onscroll事件上更改它。

Answer 4

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

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

JQuery Toggle方法在1000+ UL上变慢

4 个答案: