jsTree - 渲染优化|具有 2000 个节点的超长渲染

2024-02-06

我正在使用 jsTree ( 1.0-rc3 ) 以及通过 AJAX 加载数据的选项,并且在通过它加载大约 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();
        } );

你有没有尝试过?

  • 渐进渲染 http://www.jstree.com/documentation/json_data

    渐进渲染 一个布尔值。默认为 false。 如果此选项设置为 true,则仅将返回的 JSON 的可见(开放节点)部分转换为 DOM 节点,任何隐藏部分都会被保存并按需解析(当节点变得可见时)。当你有一个大的嵌套树会导致沉重的 DOM 时,这非常有用

  • AJAX加载

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jsTree - 渲染优化|具有 2000 个节点的超长渲染 的相关文章

  • 来自 IE 的 Web 服务调用正常,但在 Chrome 和 Mozilla 中不起作用

    我正在使用以下代码调用网络服务 function CallService ajax type GET url http devpc4 5566 Service1 asmx GetItems dataType json data conten
  • javascript - 如何获取对象名称或关联数组索引名称?

    我有一个像这样的 JSON 对象 var list name1 element1 value1 name2 element1 value2 如何提取所有 nameX 字符串值 例如 假设我想将它们连接在一个字符串中输出 例如 name1 n
  • 当php脚本通过ajax运行时显示进度条

    我有一个通过 ajax 向服务器提交值的表单
  • 触发 jQuery UI 滑块事件

    如何触发更改事件jQuery UI 滑块 http docs jquery com UI Slider 我以为会是 slider trigger slidechange 但这没有任何作用 完整的示例脚本如下
  • jQuery Mobile + Admob:轮换?

    我使用 jQuery Mobile 框架创建了一个移动应用程序 所有页面都在index php中加载 使用 div 在每个页面的页脚中 我添加了Admob代码 div div div
  • 将网站加载到 DIV 中

    当我在文本框中写入 URL 然后单击提交按钮时 如何实际从网站检索数据 我希望将数据放入我拥有的 div 中 这可能吗 我已经尝试过这个 但它不起作用
  • Cycle2 初始化事件未触发

    我使用 Cycle2 作为基本的轮播 我的幻灯片项目有时在其数据中包含一个 url 因此我必须使用 Cycle2 api 事件来使用该 url 当它存在时 我的问题是 虽然 cycle after 事件触发正常 但初始化事件都不会触发 因此
  • 使用路径id获取SVG路径d属性

    我有单独的 json 包含 SVG 路径 Id 有没有办法使用路径 id 获取 SVG 路径 d 属性 或者有没有办法只使用路径 ID 来填充 SVG 路径 您可以通过调用 document getElementById 来获取路径元素 然
  • 错误:键 $conditionalHandlers 不得以 '$' mongodb 开头

    我对 mongodb 特别是 Node js 的 mongoose 包有疑问 我有以下架构 var Schema mongoose Schema var location new Schema nomville type String re
  • 对于自定义事件,jQuery 触发器不会使用 bind() 或 on() 触发

    谁能告诉我为什么这段代码不起作用 body on test function alert test body trigger test 我在用着jquery 1 7 2 min 我没有收到任何错误 只是什么也没发生 我尝试将代码放入内联脚本
  • jQuery 最接近属性过滤器

    jQuery 1 5 1 是否支持最接近方法中的属性选择器 鉴于以下结构 el代表值为 513 的复选框 我正在尝试向上检查值为 0 的祖先复选框 el closest input value 0 0 checked true 但选择器没有
  • 如何使用 bootstrap-select 在每个选择选项上添加工具提示

    我正在尝试使用 bootstrap select 将工具提示添加到每个选择选项 当我检查时 似乎 select js 将 select 标签转换为 ul 我不知道这是我的代码不起作用的原因 html div class form group
  • CSS3 - 性能最佳实践是什么? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 仅支持以下协议方案的跨源请求:http

    这是一个常见的 JavaScript 问题 但它在使用 Splunk JavaScript SDK 的代码中弹出 错误是 XMLHttpRequest 无法加载 file C proxy services auth login output
  • 如何获取输入元素上的 TAB 键事件?

    我尝试在输入字段中按下返回键时触发按钮 这有效 但是 如果我按 Tab 键 则不会触发任何内容 因为未捕获 TAB 键事件 小提琴示例 http jsfiddle net a08t4o7r 例如 这是我的 JQ 代码片段 input nam
  • Javascript - 使数组索引 toLowerCase() 不起作用

    我试图将所有数组索引设置为小写字符串 但它不起作用 我在这里查看了其他答案并尝试了他们的解决方案 例如使用toString 添加之前toLowerCase但它不起作用 这很奇怪 我创建了一个问题的jsfiddlehere https jsf
  • 如何针对 IE 进行优化?

    我有一个 JS 密集型应用程序 它在 IE 中运行缓慢 我将花费大约一周的时间来优化 IE 并且我想要一些关于尝试的方向 我发现这个线程引用Drip https ieleak svn sourceforge net svnroot iele
  • Express JS:请求的资源上不存在“Access-Control-Allow-Origin”标头

    我有一个在服务器上运行的 API 和一个连接到它以检索数据的前端客户端 我对跨域问题做了一些研究并使其发挥作用 但我不确定发生了什么变化 我现在在控制台中收到此错误 XMLHttpRequest 无法加载https api mydomain
  • Moment.js 动态更新时间(以秒为单位)

    我试图显示时钟 that 每秒更新一次 e g 2015 年 1 月 5 日 12 05 01 它似乎对我来说工作得很好 对于相同的代码 并且只有 moment min js 指向v2 11 0 看看代码 来源 MilkyWayJoe va
  • 使用 FormData 上传 JavaScript Blob

    我在将 javascript 创建的 blob 上传到我的服务器时遇到问题 基本思想是用户上传图像 在 javascript 中我对图像进行居中裁剪并在传输之前对其进行下采样 图像处理工作正常 但上传本身无法正常工作 这是执行从 canva

随机推荐