百度脑图(kityminder)优化

目标：

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

问题：

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

原因：

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

解决方案：

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

已解决：

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

未解决：

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

遗留问题：

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

新问题：

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

遗留问题

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

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

脑图优化暂时告一段落。

问题描述：

节点数超过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帧，会略有卡顿感 只有逐级展开，没有增加双击展开所有子节点功能 没有全部展开功能，全部展开可能会造成页面卡顿。