前端对jQuery的jsTree插件的大量数据处理性能优化实践(单节点打开速度优化)

经过上一篇文章的优化之后，加载速度有了明显的提升，但是又有了新的问题：

如果一个节点下有50000个子节点，打开节点时，需要20s的时间！并且打开时页面会卡顿；

打开节点卡顿原因：

查看源码打开节点的逻辑，在open_node（）方法中通过调用draw_children（）的方法绘制子节点，再通过选择器直接将子节点的display为none属性去掉，实现展示子节点的功能。

通过打印时间戳发现draw_children方法花费的时间不是很长，50000条数据大致在2s-3s的时间，但是单独一个修改样式的操作，将内联样式display为none去掉，让css中的display为block样式生效就花费了很长时间，一定是DOM节点一下添加这么多的节点导致的问题，于是想到了下面的解决方法：

解决大量的dom节点渲染卡顿问题：

通过一步步的摸索实践，最终实现的方式

1、通过修改源码  让他先绘制1000个节点，打开速度就是按照3000节点的速度打开，提高打开速度

2、打开节点之后然后通过documentFragment()创建节点，再append进去

3、一下append很多的节点还是会卡，于是想到了通过requestAnimationFrame()来分批次创建节点

具体代码实现：

jstree在open_node时调用draw_children来绘制子节点，我先让他绘制1000个子节点，在源码的draw_children（）方法中修改，修改后的draw_children()方法：

draw_children : function (node) {
			var obj = this.get_node(node),
				i = false,
				j = false,
				k = false,
				d = document;
			if(!obj) { return false; }
			if(obj.id === $.jstree.root) { return this.redraw(true); }
			node = this.get_node(node, true);
			if(!node || !node.length) { return false; } // TODO: quick toggle

			node.children('.jstree-children').remove();
			node = node[0];
		
			if(obj.children.length &&