boyongjiong 最近的时间轴更新
boyongjiong
ONLINE

boyongjiong

欢迎大家关注 LogicFlow
🏢  DiDi / 前端
V2EX 第 260353 号会员,加入于 2017-10-17 18:36:59 +08:00
今日活跃度排名 11267
boyongjiong 最近回复了
@yuliuxuanke just do it. try 1 try 😄
@Ocyss 我个人感觉 Canvas 实现的困难点:
1. 调试困难(没办法直接像 dom 一样查看元素,调试和定位问题比较复杂)
2. Canvas 位图的方式,缩放会导致失真,豆包这种表单节点配置内容多的时候,感觉可能会有缩放的需求,不太确定缩放后体验如何
3. Canvas 作为画布,节点中如果要定义表单项的话,我目前不确定是不是要重写一套;使用 SVG 技术路线的话,可以复用项目中像 element-ui 或 antd 组件库中的表单项,实现功能相对简单
4. 我个人感觉没办法用 css 实现样式的话,Canvas 实现起来略复杂

anvt/g6 是用 canvas 实现的,可以调研一下是否能实现豆包的这个配置(我之前的感受是,g6 比较适合大数据的展示,向 node_modules 结构这种的)。

卡顿可以试一下开启局部渲染,因为 svg 的方式就是堆 DOM ,当节点内容复杂且节点数量多的时候,理论上确实会有卡顿的感觉,我们当时测试的数据如下,可以参考一下:

加载元素:
初次渲染瓶颈:
初次渲染 2000 个节点,DOM 元素数量约为 1600 ,延迟为 500 毫秒 ,明显卡顿。
初次渲染 750 个节点&边,DOM 元素数量约为 1800 ,延迟为 500 毫秒 ,明显卡顿。
增量渲染瓶颈:
在初始化渲染后,持续增加等量节点的情况下,渲染时间上下波动,总体上呈现出逐渐增加的趋势。

交互帧率:
移动画布:
画布上有 12000 个节点,DOM 元素数量约为 108129 ,帧率降低为 30 帧。
画布上有 750 个节点&边,DOM 元素数量约为 17056 ,帧率降低为 30 帧。
缩放画布:
画布上有 1500 个节点,DOM 元素数量约为 13650 ,帧率降低为 30 帧。
画布上有 840 个节点&边,DOM 元素数量约为 18596 ,帧率降低为 30 帧。
拖动元素:
画布上有 7100 个节点,DOM 元素数量约为 64029 ,帧率降低为 30 帧。
画布上有 840 个节点&边,DOM 元素数量约为 18642 ,帧率降低为 30 帧。
@810244966 -。- 买还是没必要,目前只能多宣传一下,尽人事知天命哈哈哈
@leo108 因为我们负责滴滴所有的客服业务,有很多场景是通过流程图化做动态配置的,我们把沉淀的能力抽象了一下做出了这个产品,因为内部一直在广泛使用(随着智能客服的发展,产品形态也一直在变化),所以我不太认同说是一个 KPI 项目 -。-
@NoKey 团队要投入资源和人力来维护这个事情呀,总得有一个考核点来评估一下今年的工作的 0.o
@Geekerstar 在我个人看来,我们设计的优势是灵活且易懂。X6 在设计过程中,引入的概念有点多,理解成本较高;再一个就是 X6 内部事件的实现很棒,但是难理解,如果你要看源码追踪一个问题,这个过程可能会比较痛苦。

X6 和 xyflow (原 ReactFlow )都是很不错的流程图库,我们也是在持续跟他们拉齐一些使用体验上优秀的功能。目前基本上他们可以实现的,我们也都可以实现,甚至更方便一些

这只是我自己的观点哈,欢迎对比~选择适合自己业务的那一款。
冲啊兄弟们!
2017-10-24 11:22:12 +08:00
回复了 boyongjiong 创建的主题 程序员 大冲新城花园 主卧 1 单人床位出租
@willzhang 我以前也没见过,这边好多这么干的。。
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5844 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 14ms · UTC 06:20 · PVG 14:20 · LAX 22:20 · JFK 01:20
Developed with CodeLauncher
♥ Do have faith in what you're doing.