jsTree - 渲染优化| 2000 个节点的超长渲染答案

【问题标题】：jsTree - rendering optimization | very long rendering with 2000 nodesjsTree - 渲染优化| 2000 个节点的超长渲染
【发布时间】：2012-11-10 15:57:52
【问题描述】：

我正在使用带有通过 AJAX 加载数据的选项的 jsTree ( 1.0-rc3 )，但我在加载大约 2000 个子节点时遇到了问题。虽然服务器会在几秒钟内做出响应，但 jsTree 仅需要大约 40 秒才能在浏览器中呈现结果（chrome、FF）。除此之外，FF 从 'jquery-1.7.2.min.js' 返回关于没有响应的信息。相同数量的数据冻结 IE。数据是否超载？或者它是某种错误？是否有任何可变因素可以帮助我加快渲染速度？

jQuery( "#dependency-tree" ).jstree(
        {
            'plugins':['themes', 'json_data', 'ui', 'core', 'types', 'sort'],
            "json_data":{
                "progressive_render": true,
                "data":initData,
                cache:false,
                "ajax":{
                    "url":function ( node )
                    {
                        return appContext + 'GetUnitsNode/'
                            + node.attr( 'id' );
                    },
                    dataType:"text",
                    "success":function ( data )
                    {
                        if ( data == "none" )
                        {
                            return false;
                        }
                        return jQuery.parseJSON( data );
                    }
                }
            },
            "ui":{
                'select_limit':1
            },
            "core":{
                'animation':0,
                'html_titles':true
            },
            "themes":{
                "theme":"rules",
                "dots":true,
                "icons":true
            },
            "types":{
                "types":{
                    "default":{
                        "icon":{
                            "image":appContext + "/img/orange.png"
                        }
                    }
                }
            },
            "sort":function ( a, b )
            {
               return this.get_text( a ).toUpperCase() > this.get_text( b ).toUpperCase() ? 1 : -1;
            }
        } ).bind( "select_node.jstree", function ( event, data )
        {
            submitedNodeId = data.rslt.obj.attr( 'id' );
            submitedNodeTypeId = data.rslt.obj.attr( "typeId" );
            submitedNodeLast = data.inst.is_leaf( data.rslt.obj );
            g_node_text = jQuery( data.rslt.obj ).children().eq(1).html();
        } );

【问题讨论】：

如果 jstree 的演示速度缓慢，即使有 3/4 个节点...我无法想象您使用 2K 的经验...顺便说一句，在 HTML5 中这样做应该是可行的。也许使用简单的类切换（折叠/展开）和 DOM 操作作为最后的手段

标签： jquery ajax browser rendering jstree

【解决方案1】：

你试过了吗？

progressive_render

progressive_render 一个布尔值。默认为假。如果此选项设置为 true，则仅将返回的 JSON 的可见（开放节点）部分转换为 DOM 节点，任何隐藏部分都将被保存并按需解析（当节点变为可见时）。当你有一个会导致大量 DOM 的大型嵌套树时，这很有用
AJAX 加载

【讨论】：