2017-03-14

目标：

优化脑图，使其操作更为顺畅

问题：

脑图节点数过多时，初始化渲染很慢。
对节点进行增、删、改、移动等操作时，页面卡顿，无法进行其他操作。

原因：

节点数过多，初始化、导入、渲染操作耗时较长
节点数过多，重新渲染、布局操作耗时较长
dom数过多，即使一些小改动也会引起html重绘重排，造成页面卡顿

解决方案：

尽量减少页面上的dom数
脑图初始化时，只渲染到二级
展开节点时，采取逐级展开方式，并实时判断当前展开节点数，若过多则收起其他节点
收起节点时，移除所有子节点对应的dom

已解决：

脑图初始化到二级节点
逐级展开
收起节点时，移除所有子节点

未解决：

实时判断当前展开节点数，若超过阈值（如：500）则收起当前点击节点外的所有节点

2017-03-15

遗留问题：

实时判断当前展开节点数，若超过阈值（如：500）则收起当前点击节点外的所有节点

新问题：

初始化时，序号与编号重叠
修改序号编号后，收起展开按钮被遮盖
拖拽节点（除根节点外）后，不该渲染的节点被渲染到页面
新增子节点抛错
新增子节点、合并节点结束后，目标节点的子节点没展开
新增兄弟节点、删除节点、上移下移后，序号编号没有更新
节点拖拽卡顿（未解决）

2017-03-16

遗留问题

节点拖拽卡顿
删除比较慢
录入系统页显示制作人有点慢

问题全部解决，脑图优化完成

2017-03-17

脑图优化暂时告一段落。

问题描述：

节点数超过200，初始化渲染很慢。
节点数超过200，对节点进行增、删、改、移动、合并等操作，页面非常卡顿甚至卡死
节点数过多时，消耗较多内存，节点数超过10000，对应chrome进程占用内存1G+

原因分析：

节点数过多，初始化、导入、渲染操作耗时较长
节点数过多，重新渲染、布局操作耗时较长
dom数过多，即使一些小改动也会引起html长时间重绘重排，造成页面卡顿

解决方案：

尽量减少页面上的dom数量
只渲染已展开节点对应的dom
脑图初始化时，只渲染到二级，减少需要维护的dom数量
展开节点时，采取逐级展开方式，并实时判断当前展开节点数，若过多则收起其他节点
收起节点时，移除所有子节点对应的dom
优化代码中的耗时操作
去除代码中的非必要操作

优化成果：

脑图初始化渲染速度大大提升。

优化前：3500+个节点，渲染耗时20s+，14000+节点，渲染耗时1min+
优化后：3500+个节点，渲染耗时0.7s，14000+节点，渲染耗时2.2s

页面流畅可用

优化前：节点数200+，初始化渲染很慢，操作非常卡顿
优化后：节点数14000+，初始化渲染很快，操作流畅

节点拖拽、调序、合并、删除、修改文字等操作不再卡顿

优化前：操作引起页面卡顿甚至卡死
优化后：操作可用且流畅

不足：

子节点过多（3000左右）时拖拽父节点，实测帧率低于20帧，会略有卡顿感
只有逐级展开，没有增加双击展开所有子节点功能
没有全部展开功能，全部展开可能会造成页面卡顿

百度脑图(kityminder)优化相关推荐

在线思维导图神器-百度脑图
平时工作.学习习惯用思维导图来整理所得,一是可以让知识在脑子里形成体系脉络,以后复习的时候直接把思维导图拿出来过一遍,很方便,二是勤动手加强记忆,无论看多少次思维导图,有什么不顺的地方或者发散性思维可 ...
在vue2使用百度脑图的kityminder-core进行二次开发思维导图，在源码中添加新的命令
需求说明:最近在搞kityminder-core的思维导图,需要增加一个给节点添加文件的功能,一直在研究源码,发现都是通过执行命令的方式实现的.一直卡在新增命令的步骤,搞了好多天了今天找到了如何在源码 ...
百度脑图,唯一不黑的百度产品
直达链接: https://naotu.baidu.com/ 百度脑图是一款好用到不像百度产品的产品! 开源地址: https://github.com/fex-team/kityminder.gi ...
百度脑图核心——kityminder-editor 本地化改造
一.思维导图是什么? 早在高中时代就听同学提过思维导图这种东西了,还记得那是一本物理辅导书.当时确实还不理解这种东西,可能是因为当时物理太好,不需要使用思维导图来辅助记忆那些知识点 (⊙o⊙).那时候 ...
如何在线打开Xmind文件 — 百度脑图在线工具
1.问题背景: 某些时候会接收到别人发给我们的xmind(一种思维导图)的文件,但苦于我们的电脑上没有下载Xmind软件,所以我们怎么快捷的查看该文件的内容呢? 2.解决方案: Step 1: ...
百度脑图-便捷的思维工具
前沿:百度脑图作为百度出品的一款思维管理工具,用起来真心不错,特别是线上自动保存等功能也是非常到位的设计. 1.使用:百度脑图暂无客户端,完全依赖在线broswer,所以首先你得需要安装一个支持htm ...
思维导图 mindnote，MindMaster，亿图图示，百度脑图
第一次了解到思维导图,导师用的MAC,有一款mindnote的软件但该软件支持苹果系统如果想要windows,可以尝试网页版的百度脑图客户端的亿图图示或者mindmaster mindmaste ...
在线思维导图工具百度脑图
XMind一直都在用,功能也很好.但是百度脑图的优点在于 1 在线编辑,不需下载安装 2 直接存百度网盘里.这个很赞! 官网:naotu.baidu.com
创建便于git管理的思维导图 -- markdown结合百度脑图
创建便于git管理的思维导图的方法概述最近在做一些计划或者总结的时候,喜欢用思维导图的方式去实现,图的方式可以很方便的展示内容,便于查看. 自己比较喜欢做思维导图的软件是百度脑图,主要是用起来比较 ...
百度脑图解析：如何进行web复杂应用的渐进式开发
内容来源:2017 年 4 月 8 日,张博在"HTML5梦工场 & 微软开发者沙龙第05期-持续集成"进行<Web复杂应用的「渐进式」开发>演讲分享.IT ...

百度脑图(kityminder)优化

2017-03-14

目标：

问题：

原因：

解决方案：

已解决：

未解决：

2017-03-15

遗留问题：

新问题：

2017-03-16

遗留问题

问题全部解决，脑图优化完成

2017-03-17

脑图优化暂时告一段落。

问题描述：

原因分析：

解决方案：

优化成果：

不足：

百度脑图(kityminder)优化相关推荐

最新文章

热门文章