createDocumentFragment（）的使用

最新推荐文章于 2022-04-16 23:45:58 发布

iteye_5117

最新推荐文章于 2022-04-16 23:45:58 发布

阅读量134

点赞数

分类专栏： Js/Web 文章标签： JavaScript Cache 浏览器 HTML ViewUI

Js/Web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

前段时间在论坛上发的JS操作table的时候，有人指出了，在进行大量DOM操作的时候应该使用createDocumentFragment，所以了解了一下这个方法，在浏览器里面测试了一下，效果相差还是非常明显的，有兴趣的可以下载HTML页面文件下去看看！

<html>
<head>
    <title>createDocumentFragment的使用</title>
    <script type="text/javascript">
        function slowAdd() {
            for (var i = 0; i < 10000; i++) {
                var op = document.createElement("span");
                var oText = document.createTextNode(i);
                op.appendChild(oText);
                document.body.appendChild(op);
            }
        }

        function fastAdd(){
            var oFragmeng = document.createDocumentFragment();  //创建文档碎片
            for (var i = 0; i < 10000; i++) {
                var op = document.createElement("span");
                var oText = document.createTextNode(i);
                op.appendChild(oText);
                oFragmeng.appendChild(op); 
            }
            document.body.appendChild(oFragmeng); //最后一次性添加到document中
        }
    </script>

</head>
<body >

    <p>
        <input id="Button1" type="button" value="普通方法" onclick = "slowAdd()"/></p>
    <p>
        <input id="Button2" type="button" value="createDocumentFragment快速操作"  onclick = "fastAdd()"/></p>

</body>
</html>

iteye_5117

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
createDocumentFragment（）的使用

前段时间在论坛上发的JS操作table的时候，有人指出了，在进行大量DOM操作的时候应该使用createDocumentFragment，所以了解了一下这个方法，在浏览器里面测试了一下，效果相差还是非常明显的，有兴趣的可以下载HTML页面文件下去看看！[code="java"] createDocumentFragment的使用 function s...
复制链接

扫一扫