标签：分层 问题 异步加载 ccf 省份 内容 多级 效果 拉取
如上图，最近在开发的时候遇到了了一个很...嗯....的逻辑，在一个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。这样不用改代码可以到达最佳的访问效果
标签：分层 问题 异步加载 ccf 省份 内容 多级 效果 拉取
原文地址：https://www.cnblogs.com/niuben/p/10997791.html
