超级大JSON渲染卡顿问题如何处理？管理系统左侧菜单渲染

最新推荐文章于 2024-04-28 16:12:04 发布
最新推荐文章于 2024-04-28 16:12:04 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 数据处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyphf/article/details/88849740
版权

在遇到类似上图左侧这种多级菜单时大多数同学使用的都是递归渲染，但是有个每个层级下面究竟有多少层有多少子菜单全都是不确定的，如果JSON特别大的时候点击菜单就会特别卡。

如果JSON特别特别大就使用按需加载再渲染，就像此前有个兄弟做的地图软件，JSON有20M里面都是经纬度，这种还是按需加载比较好。

如果比常规的要大很多，但是也到不了按需加载的程度，就像上面的左侧菜单一样，就使用按需渲染吧，如果你一次性递归渲染肯定是非常卡的，最好如下操作：

1、先加载下来全部数据

2、先渲染第一层，将其子菜单设为空数组[],当点击该菜单键时，再将其子菜单那一层数据push进该数组进行渲染这层子菜单

3、如果再要点击查看该子菜单的子菜单，在将这子菜单push进该子菜单的数组渲染该层

逐层如此，按需渲染

{
      "liClass": "active treeview",
      "link": "index2.html",
      "label": "结构预览",
      "iClass": "'fa fa-dashboard'",
      "children": []
    },
    {
      "liClass": "treeview",
      "link": "#",
      "label": "案例",
      "iClass": "'fa fa-files-o'",
      "spanClass": "pull-right-container",
      "spanChildIClass": "label label-primary pull-right",
      "children": [
        {
          "ulClass": "treeview-menu",
          "children": [
            {
              "liClass": "treeview",
              "link": "#",
              "label": “文字",
              "iClass": "'fa fa-circle-o'",
              "children": []
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "文字",
              "iClass": "'fa fa-circle-o'",
              "children": []
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "文字",
              "iClass": "'fa fa-circle-o'",
              "children": []
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "文字",
              "iClass": "'fa fa-circle-o'",
              "children": []
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "文字",
              "iClass": "'fa fa-circle-o'",
              "children": []
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "文字",
              "iClass": "'fa fa-circle-o'",
              "children": []
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "文字",
              "iClass": "'fa fa-circle-o'",
              "children": []
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "文字",
              "iClass": "'fa fa-circle-o'",
              "children": []
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "文字",
              "iClass": "'fa fa-circle-o'",
              "children": []
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "货商价格影响、环比",
              "iClass": "'fa fa-circle-o'",
              "children": []
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "文字",
              "iClass": "'fa fa-circle-o'",
              "children": []
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "文字",
              "iClass": "'fa fa-circle-o'",
              "children": []
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "文字",
              "iClass": "'fa fa-circle-o'",
              "children": []
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "1.0.01",
              "iClass": "'fa fa-circle-o'",
              "children": []
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "1.2.11",
              "iClass": "'fa fa-circle-o'",
              "children": []
            }
          ]
        }
      ]
    },
    {
      "liClass": "treeview",
      "link": "#",
      "label": "文字",
      "iClass": "'fa fa-share'",
      "spanClass": "pull-right-container",
      "spanChildIClass": "fa fa-angle-left pull-right",
      "children": [
        {
          "ulClass": "treeview-menu",
          "children": [
            {
              "liClass": "treeview",
              "link": "#",
              "label": "文字",
              "iClass": "'fa fa-circle-o'",
              "spanClass": "pull-right-container",
              "spanChildIClass": "fa fa-angle-left pull-right",
              "children": [
                {
                  "ulClass": "treeview-menu",
                  "children": [
                    {
                      "liClass": "treeview",
                      "link": "#",
                      "label": "文字",
                      "iClass": "'fa fa-circle-o'",
                      "spanClass": "pull-right-container",
                      "spanChildIClass": "fa fa-angle-left pull-right",
                      "children": [
                        {
                          "ulClass": "treeview-menu",
                          "children": [
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "文字",
              "iClass": "'fa fa-circle-o'",
              "spanClass": "pull-right-container",
              "spanChildIClass": "fa fa-angle-left pull-right",
              "children": [
                {
                  "ulClass": "treeview-menu",
                  "children": [
                    {
                      "liClass": "treeview",
                      "link": "#",
                      "label": "文字",
                      "iClass": "'fa fa-circle-o'",
                      "spanClass": "pull-right-container",
                      "spanChildIClass": "fa fa-angle-left pull-right",
                      "children": [
                        {
                          "ulClass": "treeview-menu",
                          "children": [
                            {
                              "type": "li",
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "liClass": "treeview",
              "link": "#",
              "label": "文字",
              "iClass": "'fa fa-circle-o'",
              "spanClass": "pull-right-container",
              "spanChildIClass": "fa fa-angle-left pull-right",
              "children": [
                {
                  "ulClass": "treeview-menu",
                  "children": [
                    {
                      "liClass": "treeview",
                      "link": "#",
                      "label": "文字",
                      "iClass": "'fa fa-circle-o'",
                      "spanClass": "pull-right-container",
                      "spanChildIClass": "fa fa-angle-left pull-right",
                      "children": [
                        {
                          "ulClass": "treeview-menu",
                          "children": [
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            }
                          ]
                        }
                      ]
                    },
                    {
                      "liClass": "treeview",
                      "link": "#",
                      "label": "文字",
                      "iClass": "'fa fa-circle-o'",
                      "spanClass": "pull-right-container",
                      "spanChildIClass": "fa fa-angle-left pull-right",
                      "children": [
                        {
                          "ulClass": "treeview-menu",
                          "children": [
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            },
                            {
                              "liClass": "treeview",
                              "link": "#",
                              "label": "文字",
                              "iClass": "'fa fa-circle-o'",
                              "children": []
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }

 

 

 

 

xyphf_和派孔明
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
流式JSON解析，可解析超大JSON文件
05-23
超大流式解析JSON文件，适用于格式为json数组的文件。理论上对文件大小无要求。
微信小程序源码-图书管理系统.zip
04-20
在这个图书管理系统中，WXML负责结构布局，WXSS负责样式设计，而JS文件则包含了交互逻辑和数据处理。 2. **项目结构**： - `pages/`：存放小程序的各个页面，每个页面通常包括WXML、WXSS和JS文件，以及对应的JSON...
解析超大JSON文件
热门推荐
一只小小云
10-21 1万+
超大JSON文件导入到ES（大于10个G）如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 如何改变文本的样式 强调文本 强调文本 加粗文本 加粗文本 标记文本 ...
【已解决】json文件太大无法打开怎么办+ijson报错
最新发布
m0_49423868的博客
04-28 463
搜了全网，甚至思考了是不是windows和linux系统的问题，然然然然然后，发现可能是确实ijson没有，因为我的文件名叫ijson，import的不是库，是我的文件。报错了 ：AttributeError: module 'ijson' has no attribute 'items'把ijson.py改成ijson2.py，发现果然import的内容也被连带着改成了import ijson2，重新修改导入。下载了一个json文档，尝试了全部的编辑器都打不开。搜了搜或许可以使用ijson。
【json】大数据json转为Object时候导致卡死的解决
happydecai的博客
01-21 1759
package net.sf.json; public static JSONObject fromObject( Object object ) { return fromObject( object, new JsonConfig() ); } 以上代码是比较常用的，在以下包中： 这个fromObject方法有个问题，就是当string大小为1M时，会导致内存占用2g以上，并且cpu一直100%，解决方法如下： 改为jackson public static <...
接口返回500kb以上的json数据，如何提高加载速度
weixin_39145193的博客
01-19 1901
接口返回500kb以上的json数据，如何提高加载速度欢迎使用Markdown编辑器 欢迎使用Markdown编辑器 如果能分页的数据就分页(看业务需求），缩减返回值的格式（业务改动比较大，前端也需要改动）。 开启 nginx 的 gzip 应该可以提高加载速度。 可以考虑压缩数据，springboot可以用配置实现（gzip压缩只支持get请求）。 server.compression.enabled=true server.compression.min-response-size=1024 ser
最近常用的json在线格式化工具及其卡顿，找到了替代品
weixin_42992109的博客
03-30 469
之前一直使用的是 json.cn的在线格式化， 但是最近使用起来 及其卡顿，怀疑数据上传服务器导致的，以后决定弃用了， 找了几个： https://tool.oschina.net/codeformat/json 测试：数据量大卡顿 http://www.bejson.com/default.htm 测试：数据量大 不卡顿，但是展示框太小，不方便查阅 https://www.sojson.com/...
使用 ajax 和 json 来做菜单联动.zip
11-30
// 在这里处理返回的JSON数据，更新菜单 } }; xhr.send(); ``` 二、JSON数据格式 JSON是一种轻量级的数据交换格式，其结构与JavaScript对象类似，由键值对组成。在本案例中，菜单数据可能存储为如下JSON对象： `...
manray:Manray -fabric.js 画布数据的流式图像渲染器
06-17
#Manray ###Streaming 图像渲染器，用于 fabric.js 画布 JSON 数据 从fabric 获取画布JSON 并从phantomjs 返回图像数据流 ＃＃＃为什么？ 从画布捕获屏幕截图可能很棘手，尤其是在您使用 SVG 时。 使用drawImage()...
Egret白鹭(json)图集切割工具.zip
05-22
Egret白鹭引擎作为一个强大的2D游戏开发框架，为开发者提供了丰富的工具链，其中包括了专门用于处理图集的"json图集切割工具"。本篇文章将详细介绍这款工具的用途、功能以及如何使用，帮助开发者更高效地进行资源...
全国，各省地图js,json数据.zip
01-13
全国，各省地图js和json数据是地理信息系统（GIS）领域常用的数据格式，它们常用于创建交互式、动态的地图应用。JavaScript（js）是Web开发的主要脚本语言，而JSON（JavaScript Object Notation）是一种轻量级的数据...
json文件读写实例
07-27
使用json-lib对json文件进行解析，自己做的实例，主要是写入json文件，包含五个jar包都在里面。
echarts 渲染 geojson 常见问题记录
潜心学习
08-13 3682
转载请加原文链接。 希望各位转载本文章的时候不要直接复制粘贴（因为格式可能会乱，你也不希望每次百度到的结果前篇一律且参差不齐吧！） 如何找 GeoJson 数据 找到具有案例的某某官网，如：echarts 控制台查看网络请求 找到官网所使用的数据来源，可能是 js 也可能是 json 数据。 下载下来提取想要的数据即可 本人常用的数据下载地址： 阿里云的地图选择器 、Natural Earth 、GeoJson.io 、Highcharts 世界地图 合并 GeoJson 数据 你可能希望画一个 .
后台返回数据太大，前端接收太慢处理
阳光
08-26 9762
可以后台生成文件返回前端，返回文件路径，前端直接通过nginx请求文件，则读取非常快 nginx配置如下nginx配置 1、http节点里添加属性 gzip on; gzip_min_length 10k; gzip_buffers 4 16k; gzip_comp_level 3; gzip_types text/xml text/javascript application/javascript text/css text/plain text/json...
JSON.parse和JSON.stringify的bug解决
qq_60178319的博客
11-09 881
我们在使用JSON.parse(JSON.stringify(value))进行深拷贝时，有时候会出现异常bug导致页面崩溃，所以需要做一下处理，这里记录一下
[前端]AdminLTE 侧边栏三级菜单栏实现 解决点击子菜单侧边栏折叠
HUGG_dajingzi的博客
12-25 2007
1.三级菜单栏 用二级嵌套 <ul class="sidebar-menu" style="" id="nav"> <li class="treeview" id="nav-collection"> <a href=""> <i class="fa fa-anchor"></i><span>一级标题1</span> <span class=
前端性能优化：JSON数据的优化
xuexiaodong2009的专栏
07-05 4424
JSON数据的可以优化吗?肯定可以，之前都是使用XML，但之后用XML越来越少了，就是因为XML包含的冗余信息太多了。那么JSON数据有没有冗余呢？肯定有，名称就是重复的！！例如如下的JSON数据：{"total":28,"rows":[ {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","list
后台数据传输数据（json）太大无法在前端显示
qq_42899641的博客
02-01 3683
解决方案：1.将后台json数据转化为json字符串，并修改字符串最大传输字节限制。 json格式数据： return Json(new { Result = 1, SportCheckTimeSpanList = SportCheckTimeSpanList, count = SportCheckTimeSpanList.Count, IsTrue = IsTrue, Msg = Msg, code = 0 }); 转化为json字符串格式数据： JavaScriptSerializer JsSerial
json schema渲染el-table
10-08
JSON Schema 是一种用于描述和验证 JSON 数据结构的语言和规范。而 el-table 是 Element UI 中的一个表格组件，用于展示数据。要在 el-table 中渲染 JSON Schema，可以按照以下步骤进行操作： 1. 解析 JSON Schema：首先，我们需要解析 JSON Schema 数据，可以使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象。 2. 获取数据结构：根据 JSON Schema 的结构，可以获取到其中定义的属性、类型、格式等信息。这些信息可以用来构建 el-table 的表头。 3. 构建 el-table：根据解析得到的数据结构，我们可以动态生成 el-table 的表头，并将 JSON 数据作为表格的一行行渲染出来。 4. 绑定数据：将解析后的JSON数据绑定到el-table组件上，使之展示在表格中。 5. 数据校验：如果需要对数据进行校验，可以使用 JSON Schema 提供的验证功能，对输入的数据进行验证，然后在 el-table 中显示校验结果。 6. 添加其他功能：根据需求，可以添加其他功能，如排序、筛选、分页等，来扩展 el-table 的功能。 总结：通过解析 JSON Schema，我们可以根据其结构动态生成 el-table 的表头，并将 JSON 数据渲染到 el-table 中。同时，还可以使用 JSON Schema 的验证功能对数据进行校验。这样，我们就可以利用 JSON Schema 渲染 el-table，轻松展示和操作 JSON 数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值