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