海量数据处理方案

  1. 离线渲染技术，PlanUml及Offline Canvas；
  2. 局部渲染技术，脏矩阵渲染；
  3. 双引擎切换，GPU渲染

多端渲染对接方案

  1. 语法编译，编译时思路；
  2. 运行时思路；
  3. 底层渲染指令思路

时间分片

  1. DocumentFragments是DOM节点，但并不是DOM树的一部分，
  2. 可以认为是存在内存中的，所以将子元素插入到文档片段时不会引起页面回流
  3. 时间分片的方式来同时加载大量简单DOM
    1. 复杂DOM的情况，一般会用到虚拟列表的方式来实现
  1. //需要插入的容器
  2. let ul = document.getElementById('container')
  4. // 插入十万条数据
  5. let total = 100000;
  6. // 一次插入 2000 条
  7. let once = 2000;
  9. //总页数
  10. let page = total/once
  12. //每条记录的索引
  13. let index = 0;
  15. //循环加载数据
  16. function loop(curTotal,curIndex){
  17.  if(curTotal <= 0){
  18.   return false;
  19.  }
  20.  //每页多少条
  21.  let pageCount = Math.min(curTotal , once);
  23. window.requestAnimationFrame(function(){
  24.   let fragment = document.createDocumentFragment();
  26.   for(let i = 0; i < pageCount; i++){
  27.     let li = document.createElement('li');
  28.     li.innerText = curIndex + i + ' : ' + ~~(Math.random() * total)
  29.     fragment.appendChild(li)
  30.   }
  32.   ul.appendChild(fragment)
  33.   loop(curTotal - pageCount,curIndex + pageCount)
  34.   })
  35. }
  36. loop(total,index)

等比例采样

  1. js 数据等比例采样
  2. 后台返回 1万条数据，图表渲染3000条数据
  3. 用数据的长度 除以 3000，例如 10000/3000 = 3.4 ；每隔3个采集一个数据
  4. 从0开始，每隔3个 获取，3333条数据，再等比例获取（4800-3333=1467）1467帧