无限极 页面被数据卡死了

Posted 2022-01-02 niuben

如上图，最近在开发的时候遇到了了一个很...嗯....的逻辑，在一个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。这样不用改代码可以到达最佳的访问效果