JS-treelist-performance

优质
小牛编辑
128浏览
2023-12-01

现状

浏览器只能支持IE9+,原因是使用了OCX。建议弃用OCX使用Chrome。

名称IEChromeChrome vs IE
市场占有率6.37%67.39%Chrome绝对优势领先
对标华天、windchill老版windchill新版达索使用的是Firefox
DOM渲染性能5-30倍
JS执行性能5-8倍
OCX支持不支持IE11已经放弃后续支持
兼容性需要对IE+各个版本进行兼容性处理基本符合w3c标准代码增加,大量时间进行兼容性处理,维护不易
服务端请求响应较快IE数据解析随数据量程指数上升,超过1M数据量会出现卡死
测试需要测试IE9+四个版本最新版IE不同小版本仍存在差异
JS调试分析困难容易打开调试工具慢且经常卡死
性能分析工具不全不易用较完善的分析工具

以上对比分析,受到IE内核性能的限制,工业软件复杂的和大数据量的业务需求,无法满足高性能、高易用的要求。在沼泽中无法盖高楼。

BOM树列表

测试要求:

  1. 压力测试上线限2W数据量的一次性加载
  2. 压力测试单个树列表中展示上限2W
  3. 加载不卡顿
  4. 拖动不卡顿

性能:按排序递减

  1. Chrome>IE9+(30%-50%)
  2. Demo>平台(10%-20%)
  3. 浏览>编辑(10%-20%)
  4. 普通展示>支持冻结列(20%-30%)

解决方案:(还是9月份针对华为列表大数据加载提出的方案)

  1. 基于hqGrid底层控件(于2017年完成,未进行全面测试和使用),进行功能扩展和性能优化。
  2. 平台集成控件
  3. 服务器交互接口重新实现

技术关键:

  1. 懒加载
    • 数据懒加载(未实现【性能】)
    • DOM懒加载(已实现【性能】)
  2. 列表可视范围局部渲染(已实现,需优化)
    • DOM局部动态渲染(实现【性能】)
    • HTML局部动态解析(未实现【性能】)
  3. 冻结列(未实现【功能】)
  4. 树列表(未实现【功能】)

开发周期:建议分成三个迭代完成(需要确定使用哪个浏览器)

  1. 压力测试普通列表性能,优化达到要求
  2. 开发树列表功能
  3. 开发冻结列