就好比我们超市里买东西,如果我们买完东西,一个一个的东西拿回家,来来回回也能搞完,但是也可以统一装在袋子里,然后提着袋子回家;这样就更便捷;

传统的写法是下面这种的:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var oUl=document.getElementById("ul1");

for(var i=0;i<100000;i++)
{
var oLi=document.createElement("li")
oUl.appendChild(oLi);
}
}
</script>
</head>
<body>
<ul id="ul1"></ul>
</body>
</html>

我们用文档碎片的方法可以改变下:

用的是createDocumentFragment()语法来做的;

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var oUl=document.getElementById("ul1");
var oFrag=document.createDocumentFragment();

for(var i=0;i<100000;i++)
{
var oLi=document.createElement("li")
oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
}
</script>
</head>
<body>
<ul id="ul1"></ul>
</body>
</html>

提高的是插入DOM元素的性能,但是一般没人会插入一万个元素的,正常几十个就了不得了;“`