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

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

效果图

图一：

图二：

实现难点

鼠标缩放，x轴的缩放方式

鼠标缩放产生时序图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;
  };

鼠标缩放，保持以鼠标为中心，往两边放大

先放推理过程图：

// 上图解释
// 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,换算成秒），从大到小的降序获取时间单位。

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS的clip-path属性怎样用?浅谈clip-path使用示例

  这篇文章给大家分享的是CSS的clip-path属性的使用。clip-path属性能实现不规则图形的显示，在剪裁工具中有很大的用处，接下来给大家介绍以下各示例，对大家了解clip-path属性的使用有一定的参考价值，感兴趣的朋友接下来一起跟随小编看看吧。

• CSS中before和after怎样使用呢

  CSS技术中，想要灵活运用:before和:after，我们可以用什么方法呢！一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

• 用CSS3怎么试下背景图遮罩，但背景图文字显示的效果

  这篇文章主要介绍了CSS3为背景图设置遮罩并解决遮罩样式继承问题,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS中变换和过渡分别如何实现，效果不同在哪

  本篇文章给大家带来了关于css的相关知识，其中主要介绍了关于transform变换和transitions过渡的相关问题，一起看看CSS实现盒子的转换与过渡效果，希望对大家有帮助。

• 10种常见的现代css布局你了解多少？

  篇文章给大家分享的CSS布局的实现，下文介绍了10种常见的现代css布局。小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。