js文档碎片---DocumentFragment

最新推荐文章于 2024-07-04 14:47:06 发布

miao淼

最新推荐文章于 2024-07-04 14:47:06 发布

阅读量724

点赞数

分类专栏： jQuery源码学习文章标签： javascript html5 DocumentFragment

本文链接：https://blog.csdn.net/wujimiao/article/details/78177635

版权

jQuery源码学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

当我们操作html节点时候，很多情况是需要大量添加DOM元素，如果是不断地使用appendChild插入子节点方式，性能会大打折扣。所以我们应该使用文档碎片，一种轻量级文档处理方式，但是并没有所谓的文档碎片标签。

文档碎片可以当作仓库，缓存使用。

看例子代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DocumentFragment文档碎片</title>
</head>
<body>
    <div id="test"></div>
    <div id="test2"></div>
    <script>
        function a1() {
        var time1 =( +new Date());
        for (var i = 0; i < 5000; i++) {
            var op = document.createElement("span");
            var oText = document.createTextNode(i);
            op.appendChild(oText);
            document.body.appendChild(op);
        }
        document.getElementById('test').innerHTML = '<br><div>普通方式创建耗时'+ ( +new Date() - time1);
    }

    function a2() {
        var oFragmeng = document.createDocumentFragment(); //创建文档碎片
        var time2 =( +new Date());
        for (var i = 0; i < 5000; i++) {
            var op = document.createElement("span");
            var oText = document.createTextNode(i);
            op.appendChild(oText);
            oFragmeng.appendChild(op);
        }
        document.body.appendChild(oFragmeng); //最后一次性添加到document中
        document.getElementById('test2').innerHTML = '<br><div>文档碎片创建耗时'+ ( +new Date() - time2);
    }
    a1();
    a2();
    </script>
</body>
</html>

上面例子，性能区别可以忽略，也许是文档碎片需要繁重大量的DOM操作优势才能体现吧！？文档碎片能够加快dom元素操作，当然也可以使用一个div标签，将所有元素添加到div上面，再添加到目标节点上，性能差不多。所以是否需要使用文档碎片，看实际情况吧。

参考链接：http://www.cnblogs.com/sxhlf/p/7027208.html

miao淼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js文档碎片---DocumentFragment

当我们操作html节点时候，很多情况是需要大量添加DOM元素，如果是不断地使用appendChild插入子节点方式，性能会大打折扣。所以我们应该使用文档碎片，一种轻量级文档处理方式，但是并没有所谓的文档碎片标签。文档碎片可以当作仓库，缓存使用。看例子代码： DocumentFragment文档碎片
复制链接

扫一扫

专栏目录