妙味——文档碎片

最新推荐文章于 2024-04-26 17:04:43 发布

weixin_30348519

最新推荐文章于 2024-04-26 17:04:43 发布

阅读量45

点赞数

文章标签： xhtml 面试

原文链接：http://www.cnblogs.com/baixc/p/3458288.html

版权

document.createDocumentFragment()

1、普通创建方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script>
window.onload=function(){
    var oBtn = document.getElementById('btn');
    var oUl = document.getElementById('ul1');
    
    oBtn.onclick=function(){
        var iStart = new Date().getTime();
        var i = 0;

        for(i=0;i<10000;i++){
            var oLi = document.createElement('li');

            oUl.appendChild(oLi);
        }

        alert(new Date().getTime()-iStart);
    };
}
</script>
</head>
<body>
    <input type="button" value="普通方式" id="btn" />
    <ul id="ul1"></ul>
</body>
</html>

2、文档碎片方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script>
window.onload=function(){
    var oBtn = document.getElementById('btn');
    var oUl = document.getElementById('ul1');
    
    oBtn.onclick=function(){
        var iStart = new Date().getTime();
        var oFrag = document.createDocumentFragment();    //创建文档碎片用
        var i = 0;

        for(i=0;i<10000;i++){
            var oLi = document.createElement('li');

            oFrag.appendChild(oLi);
        }

        oUl.appendChild(oFrag);

        alert(new Date().getTime()-iStart);
    };
}
</script>
</head>
<body>
    <input type="button" value="碎片方式" id="btn" />
    <ul id="ul1"></ul>
</body>
</html>

有时候文档碎片方法反而会影响性能，多用于面试。

转载于:https://www.cnblogs.com/baixc/p/3458288.html

weixin_30348519

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
妙味——文档碎片

document.createDocumentFragment()1、普通创建方法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://...
复制链接

扫一扫