在脚本化文档时,应该避免频繁地引起浏览器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>