[JavaScript]使用document.createDocumentFragment优化性能

最新推荐文章于 2025-08-11 19:52:03 发布

转载最新推荐文章于 2025-08-11 19:52:03 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/344099

文章标签：

#javascript #xhtml #ViewUI

本文通过对比两种不同的DOM元素添加方式，展示了如何使用DocumentFragment来显著提高网页应用的性能。一种方法是在每次循环中直接将元素附加到DOM树上，而另一种方法则是先将所有元素附加到DocumentFragment中，最后再一次性添加到DOM树上。

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

如果对客户端动态交互要求比较高，在DOM里需要频繁动态增加元素，那么可能会遇到性能问题，那么就有可能用到DocumentFragment了，具体看看下面的例子，性能差别还是挺大的。

<!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">
<head>

    <title></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="button" onclick = "slowAdd()"/></p>

    <p>

        <input id="Button2" type="button" value="button"  onclick = "fastAdd()"/></p>

</body>
</html>