documentFragment 避免浏览器reflow提高性能

在脚本化文档时，应该避免频繁地引起浏览器reflow（关于reflow的详细讲解请看前面的文章里的一个视频）

减少reflow，优化性能的途径很灵活，总的一句就是把多次reflow攒在一起一次性进行。

如利用innerHTML、一次性改变样式。

今天想说一下documentFragment。

documentFragment相当于一个临时容器，我们把添加的dom元素在这个documentFragment上加上（此时并没有加入到document中，也就不会引起浏览器reflow），当所有的dom元素操作完后，再一次性地把documentFragment对象加入到document中，只发生一次reflow。

而说documentFragment对象是“临时容器”再适合不过了，因为它不会被加入到document对象中，当它把里面的内容加入到document对象里时，自已就“功成身退”了。

<ul id="menu">目录</p>

<script type="text/javascript">
	function insert(elem){
		var df = document.createDocumentFragment();
		for(var i=0;i<3;i++){
			var tempLi = document.createElement("li");
			li.innerHTML = "子目录"+i;
			df.appendChlid(tempLi); //这里浏览器文档没有结构还没改变，不会发生reflow.
		}
		elem.appendChlid(df);	//df片段其内容加入到elem中，但df本身并不在document中。发生一次reflow
	}
        var menu = document.getElementById("menu");
        insert(menu);
 </script>