无限极 页面被数据卡死了

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

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

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

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

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

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

可现在不是分层级的问题,而是某一层数据太多了,到达那一层级的时候就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