无限极页面被数据卡死了

Bertha 。 2021-12-11 05:43 266阅读 0赞

![ffde4dec6f573cb0df3befb6ba9108af0ee.jpg][]

如上图，最近在开发的时候遇到了了一个很...嗯....的逻辑，在一个tree控件上面加载数据。

头一次是自己坑爹了，把这多级数据同步加载出来了，导致页面卡死。

第二次，把所有层级搞成异步加载，嗯，这样要好一点了。但是，到最后一级的时候数据有六千多条（更有甚者几万多条的）。又导致页面卡死：

![cd16da6eccf134837083872862335a6e771.jpg][]

解决办法是【按需加载】。

子节点默认不加载，当父节点被展开是才加载直接下级的子节点。

当然，你也可以直接把省份、市的两级数据都一次加载好，县区级别太多就用按需加载。

可现在不是分层级的问题，而是某一层数据太多了，到达那一层级的时候就over了

其实万级别的数据在这种数据结构里并不算多，吃一点内存是完全ok的，主要是浏览器的渲染问题，复杂的dom结构过1000就能明显感觉到渲染性能的问题了。解决的方案无非是控制可视区域的展示，也就是前面几位老哥说的分页拉取，但是可以不用每次与后端交互拉取，前端实现分页拉取就可以了，性能还是值得信赖的。

**大佬给出解决方案**

几千条记录根本不算多，但是有一点要注意，你这个是前端的UI渲染引发的卡顿。即你在一个html里加载6000多条数据，同时显示怎么优化也会卡的。但是如果排除这个情况，楼主可以考虑数据静态化处理，即把树型结构写到json文件里，然后把这个json的文件的mime信息设置为text/json这样的文本内容。这样第一次加载慢一点，但是为304缓存到浏览器里，第二次再加载由于已经被304了直接从客户端加载速度会很快的。但是要记得请求这个json的时候加一个？时间戳。这个作用是动态生成加载json文件.即

<script type=text/javascript src=localData.json?time=1559186353146></script>

你这个页面的引用js的url是动态生成的，生成是在数据变化时重新生成一次。如果数据没有变化则不生成。

这样的目的是time如果不变会一直304缓存，如果time变化则表示有新数据，浏览器自然会重新get。这样不用改代码可以到达最佳的访问效果

转载于:https://www.cnblogs.com/niuben/p/10997791.html

[ffde4dec6f573cb0df3befb6ba9108af0ee.jpg]: /images/20211211/17e53c1e2e5943f8b7c30ce49dea4c4c.png
[cd16da6eccf134837083872862335a6e771.jpg]: /images/20211211/369b309e8d644d2a9512cc81fd1ff277.png

发表评论取消回复

表情：

评论列表（有 0 条评论，266人围观）

还没有评论，来说两句吧...

相关阅读

相关 PHP无限极分类

PHP实现无限极分类有哪些方式？面试的时候被问到无限极分类的设计和实现，比较常见的做法是在建表的时候，增加一个PID字段用来区别自己所属的分类。递归和引用算法实现

女爷i/ 2023年10月06日 17:03/ 0 赞/ 47 阅读

相关 php无限极分析技术,php无限极分类实现方法分析

本文实例讲述了php无限极分类实现方法。分享给大家供大家参考，具体如下：今天给大家带来的是php的无限极分类技术，本人把无限极分类划分为两种。首先我把数据库表给大家看看

我不是女神ヾ/ 2023年01月17日 08:22/ 0 赞/ 168 阅读

相关 php无限写文件导致服务器卡死,php5.2的curl-bug服务器被php进程卡死问题排查.pdf

php5.2的的curl-bug 服服务务器器被被php进进程程卡卡死死问问题题排排查查前几天东政同学反馈说Linode服务器快卡死了，今天有时间排查了一具体原因，最终原

川长思鸟来/ 2022年09月04日 10:46/ 0 赞/ 163 阅读

相关无限极分类

1.调用方法 function __construct(){ parent::__construct();

拼搏现实的明天。/ 2022年07月30日 14:22/ 0 赞/ 208 阅读

相关 php实现无限极分类

php无限极分类这里首先介绍一下，什么是无限极分类？无限极分类简单点说就是一个类可以分成多个子类，然后一个子类又可以分另外多个子类这样无限分下去，就好象windows

蔚落/ 2022年07月15日 05:10/ 0 赞/ 267 阅读

相关【PHP】重整无限极分类

无限分类，是指从一个最高分类开始，每个子分类都可以分出自己的若干个子分类，可以一直分下去，称为无限级分类；无限极分类数据表设计 ![图示][SouthEast] c

待我称王封你为后i/ 2022年06月14日 07:39/ 0 赞/ 195 阅读

相关 jq-json数据-无限极-层级

样子： ![这里写图片描述][SouthEast] 数据：后台返回的json数据， ![这里写图片描述][SouthEast 1] 用法：务必页面加

缺乏、安全感/ 2022年06月02日 00:19/ 0 赞/ 184 阅读

相关 php实现无限极分类

php无限极分类这里首先介绍一下，什么是无限极分类？无限极分类简单点说就是一个类可以分成多个子类，然后一个子类又可以分另外多个子类这样无限分下去，就好象window

深碍√TFBOYSˉ_/ 2022年05月11日 03:54/ 0 赞/ 276 阅读

相关 laravel无限极分类

大概思路就是创建表的时候创建一个他的分类id 这个id则是无限极分类的上级id 在模型里面写的方法就是递归调用然后在控制器调用模型里面的方法返回到控制器大概代

客官°小女子只卖身不卖艺/ 2022年04月17日 00:46/ 0 赞/ 243 阅读

相关无限极页面被数据卡死了

![ffde4dec6f573cb0df3befb6ba9108af0ee.jpg][] 如上图，最近在开发的时候遇到了了一个很...嗯....的逻辑，在一个tree控件上面

Bertha 。/ 2021年12月11日 05:43/ 0 赞/ 267 阅读