是这样的。我是做GPS车辆监控系统的,现在要补充一个网页版,按照客户端的方式先获取单位列表和车辆列表,由于获取到的数据还需要保存到类中调用遍历区分父节点子节点,一旦数据过多的时候JS脚本响应就慢。
使用平台的最大总账户测试的时候,本来CHROME浏览器和火狐、猎豹都没有问题,虽然不算快,但是2S之内也能现实近千个单位,上万辆车的节点树了。但是换了IE(IE6~8都试过)之后,要长达7s左右,期间还不断跳出"停止运行此脚本吗"的提示,怎么样才不让这个JS加载缓慢的过程提示呢?
其实解决的方法还有改进代码,如果js有什么高效的hashmap就好了,有hashmap寻找父子节点关系就不用遍历了,到github搜了几个感觉都好复杂,有什么推荐的吗?
上万个对象对js压力其实不大,但上千个dom就压力巨大了,优化dom往往比优化hashmap什么的有效
瓶颈在dom的渲染,
异步渲染dom,在节点展开时再去 生成节点;
——————————— 补充 ———————————————
加载好数据后,html 只生成第一级菜单的,后面根据点击事件去生成需要的节点; 数据都可以缓存在 js变量中的;
其实最简单的是去找个支持异步渲染的tree 插件,比如dhtmlxTree
官方例子地址:http://dhtmlx.com/docs/products/dhtmlxTree/samples/12_loading_processing_data/10_pro_smart_parsing.html
xml json csv 格式的数据都是支持的;
应该可以符合你的需求的;
需要在一个图中显示这么多节点么 超过几百个节点对浏览器性能也是考验
如果只是列表 建议用树按需求加载
几个点题主可以检查一下.
在生成完要更新的 DOM 树之前, 不要插入到 document 里, 这样浏览器只会渲染一次. 如果浏览器进行多次渲染, 这个代价是相当大的. 另外这里可以考虑尝试直接构造 HTML 字符串并在最后一次性通过 innerHTML 写入 document, 对比下性能.
遍历一万个对象如果时间复杂度只是 O(n), 应该影响是非常有限的, 但另外 DOM 就不同了 (其实如果只是遍历应该还好, 但毕竟这些最终会被渲染), 是否有必要新增上万个 DOM 节点?
同意@tza17313 所说得
异步渲染dom,在节点展开时再去 生成节点;
可以数据一次性加载到浏览器本地数据库 localstore 再做
异步渲染dom