JavaScript中的文档碎片DocumentFragment

最新推荐文章于 2025-05-28 08:58:31 发布

原创最新推荐文章于 2025-05-28 08:58:31 发布 · 763 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#javascript #fragment #文档碎片

前端专栏收录该内容

72 篇文章

订阅专栏

本文介绍了JavaScript中的文档碎片（DocumentFragment）及其在性能优化中的应用。通过使用文档碎片，可以避免频繁的DOM操作导致的浏览器渲染，提高页面性能。文章详细解释了文档碎片的作用，并提供了一个在ul中一次性添加多个li的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：时隔两年又一次接触到文档碎片，还记得当时blue老师讲文档碎片的时候，自己仍然是记忆犹新。学习了这个知识点以后，从来没有用过，这次在看书的时候看到这个东西了，想着还是来总结一下吧，说不定后面在哪个项目都用到了（主要原因是以前写网站都没有考虑到性能优化，现在还是的考虑一下这个问题啦）

文档碎片是什么东西

如果我们要在一个ul中添加100个li，如果不使用文档碎片，那么我们就需要使用append经常100次的追加，这会导致浏览器一直不停的渲染，是非常消耗资源的。但是如果我们使用文档碎片了，我们可以先将100个li添加到文档碎片中，然后直接把这个文档碎片追加到ul中即可。所以文档碎片其实就是一个临时的仓库。

文档碎片的具体应用

在一个ul中添加100个li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>welcome</title>
    <style>

    </style>
</head>
<body>
    <ul id="ul"></ul>
    <script type="text/javascript">
        window.onload = function() {
            var oLi;
            var oText;
            var oUl = document.querySelector("#ul");
            var oFragment = document.createDocumentFragment();
            for(var i=1; i<=100; i++) {
                oLi = document.createElement("li");
                oText = document.createTextNode(i);
                oLi.appendChild(oText);
                oFragment.appendChild(oLi);
            }
            oUl.appendChild(oFragment)
        }
    </script>
</body>
</html>

（完）