JavaScript中的文档碎片,已经过时的东西,几乎没有用的了,但思路一直都有用

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

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

<!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元素的性能,但是一般没人会插入一万个元素的,正常几十个就了不得了;“`

未经允许不得转载:朱邦邦的博客 » JavaScript中的文档碎片,已经过时的东西,几乎没有用的了,但思路一直都有用

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址