likes
comments
collection
share

原生js+css+html实现时序图

作者站长头像
站长
· 阅读数 0

前言

前面我用React + AntDesign 实现了一个简单的时序图，但是后来有了更复杂的需求，并且要求同时展示2000个任务的展示，这就涉及到了性能问题，本人先使用React+antd+ts实现了一个基本满足下面需求的demo，但是react的渲染机制造成了较大的性能问题，利用chrome自带的Performance，测试发现demo的首次渲染高达10s以上，并且后续的操作也会使整个页面非常卡。时序图设计到的折叠和展开功能涉及到整个页面的重绘，经过思索后决定使用原生js+css去实现，因为原生js下性能是最优的。

需求

什么是时序图

  1. 有一个以时间为单位的坐标轴。
  2. 以任务的耗时时长计算任务在页面上的显示长度。
  3. 用线条连接的方式表示任务之间的关系，可追踪子任务，父任务。例如：从什么时候创建，从什么时候开始。
  4. 每个任务里附带有任务的信息。例如：任务的id,任务的名字,任务的状态。
  5. 用不同颜色区分任务的运行状态。

功能点

下面先来说说新版本的需求：

  1. 左侧以树形结构展示任务，可折叠
  2. 右侧展示任务运行所耗时间的长度
  3. 需要用线条链接任务之间的关系
  4. 右侧可缩放查看详细的任务状态
  5. 缩放时图形保持以鼠标为中心向两端成一定比例放大，放大时里面的文字描述不受影响
  6. 图形缩放时表示任务耗时的时间以及坐标需要跟随图像放大的比例进行相应变化
  7. 鼠标在时序图上移动时出现一根线条提示当前的时间以及信息

效果图

图一：

原生js+css+html实现时序图

图二：

原生js+css+html实现时序图

实现

如何实现鼠标滚轮缩放？

鼠标缩放产生时序图X轴的缩放。时序图的缩放，在这里提供三种思路：

  1. 做数据截取，按照一定的算法截取前后的数据，然后重新渲染整个页面
  2. 利用css3的scaleX对时序图的dom做缩放
  3. 实际改变时序图dom的width，里面的任务运行的长度，连接线条的长度，任务运行预计需要的时长都以百分比显示。

三种思路的优缺点：

  1. 优点：不需要去操作dom的css属性，之间重新渲染，比较方便。缺点：对于使用dom重绘，耗费性能严重，大量任务渲染时性能很慢。
  2. 优点：只需改变dom的css，加载快，较流程。缺点：计算麻烦，使用过scaleX的小伙伴会发现当我X轴放大时垂直连接线会变宽，字体会横向拉伸，都需要去反向缩小。
  3. 优点：加载快，很流畅，一次计算好元素所占宽度的占百分比，后面的操作都不需要去计算。缺点：使用百分比计算会有一定误差，放大到一定程度会看的出来。（综合考虑，本人采用的是第三种）
// 计算宽度百分比的函数
// endTime: 任务的结束时间
// startTime: 任务的开始时间
// maxTime: 所有任务结束时间最大的值
// minTime: 所有任务开始时间最小的值
// time: 所有任务开始时间与结束时间的排序 升序
// task_width: 任务的长度、水平连接线的长度、垂直连接线的left值
const widthFun = function (endTime, startTime, maxTime, minTime) {
    const task_width =
    (((Number (endTime) - Number (startTime)) /
    ((maxTime || time[time.length - 1]) - (minTime || time[0])) *
    (body_width - tree_box_dom.offsetWidth)) / dom.offsetWidth)*100;
    return task_width> 100 ? 100 : task_width;
  };

如何在缩放时保持以鼠标为中心？

先放推理过程图：

原生js+css+html实现时序图

// 上图解释
// dom = 时序图的dom元素
// domL1, domeL2 = dom.scrollLeft;
// domeL1表示前一次的dom.scrollLeft;
// domeL2表示当前的dom.scrollLeft;
// scale 表示当前的放大的比例
// scale1 表示上一次的放大比例
// tree_dom.offsetWidth表示左侧树的宽度
// clientX1 表示上一次的鼠标位置距离时序图左侧的距离 = e.clientX - tree_dom.offsetWidth
// clientX2 表示当前鼠标位置距离时序图的距离

<!-- 当鼠标缩放时,得到公式 -->
domL2 = domeL1(scale/scale1) + clientX1(scale/scale1) - e.clientX + tree_dom.offsetWidth
// 公式讲解：
// 1. scale/scale1表示本次的缩放比例除以上一次的缩放比例，表示当前的缩放比例
// 左侧卷去的宽度在第二次缩放时也会跟着缩放，所以左侧的宽度需要乘以缩放比例
// 鼠标位置距离时序图左侧的宽度在缩放时也会跟着缩放，所以也要乘以缩放比例
// 最后面减去鼠标位置距离时序图左侧的实际距离就等于缩放时左侧卷去的长度

// 页面代码
time_box_parent.scrollLeft = (time_box_parent.scrollLeft + e.clientX - tree_box_dom.offsetWidth) * (scale_x / scale_x1) - e.clientX + tree_box_dom.offsetWidth;

如何高效的绘制任务连线？

方案：

  1. 采用的时css3 + js + html5,用伪元素绘制。
  2. 用dom包裹直角图片，设置其位置及高度。
  3. 用标签绘制

优缺点：

  1. 优点：不会增加多余的标签，对渲染有利。缺点：父任务产生了多个子任务，不好添加伪类及设置伪类的高度及宽度。
  2. 优点：方便，只要计算子任务距父任务的高度即可。缺点：任务过多时图片会非常多，很影响性能
  3. 优点：单独控制每个元素的高度及位置，可控性高，可添加反馈色。缺点：添加了较多的元素，对渲染产生影响（本人使用的是第三种，这是一个笨方法，有更好方法的大佬，可以提供建议，多谢）

实现思路：

用一个变量记录每个任务的层级深度，层级深都以当前任务的父任务为起点，就是说是从哪个任务产生的当前任务，同级的子任务进行累加操作。用累加的变量按照一定的比例获取垂直连线的高度以及水平连线的top值，水平连线的长度由任务的创建时间和开始时间决定。（使用上面的宽度百分比函数）

如何在缩放时调整横轴单位

这个比较简单，实现思路：

因为本demo的时间4刻度是个刻度，判断最小时间戳与最大时间戳之间的差除以4，是否还有一天的时间（60 * 60 * 24,换算成秒），从大到小的降序获取时间单位。

总结

使用原生js+html+css比使用框架渲染大量demo性能更好。完成了同样的效果与功能，使用chrome工具测试，渲染时间直用了1.3s左右，相较于之前的性能提高了10倍以上。当然框架有框架的优势，React中，render执行后获得的并不是真正的DOM节点，而是一个虚拟的Virtual DOM （JavaScript对象），虚拟DOM具有batching（批处理）和高效的Diff算法,虚拟DOM与真实DOM形成对比，当虚拟DOM发生变化时，把变化的部分同步到真实的DOM上面去，形成局部更新。假如我们2000个元素分成20个逻辑块，每个逻辑块包含50个元素，这时如果我们采用React的话就只需要更新对应的逻辑块，在这种情况下React的Virtual DOM的渲染效率就会更高。因为我们的时序图是整个页面的刷新，大量DOM的重绘，所以用原生效率更高。最后在多说一句：框架要会用，原生是根本。

思路指导：yalishizhude

参考资料：

React虚拟DOM浅析

OpenTracing

原文链接：tech.gtxlab.com/timingDiagr…

作者信息：宁文飞，人和未来大数据前端工程师