document.createDocumentFragment(文档碎片)

时间 2019-11-12

标签 document.createdocumentfragment document createdocumentfragment 文档碎片繁體版

原文原文链接

document.createDocumentFragment其实是为了减小Dom次数，提升页面效率和性能；由于每当javascript对Dom操做一次，页面将刷新一次并更新内容；而利用document.createDocumentFragment建立一个文档碎片，将全部Dom操做追加到该文档碎片，最后一次性将该文档碎片添加到document中。相比前者，后者只须要对Dom操做一次，页面也就只被刷新一次，因为页面刷新次数大大减小，从而提升页面显示的效率。javascript

<html>

<head>

    <title>document.createDocumentFragment()测试页面</title>

</head>

<body>

    <script type="text/javascript">

        var d1 = new Date();

        for (var i = 0; i < 1000; i++) {

            var op = document.createElement("P");

            var oText = document.createTextNode("test1");

            op.appendChild(oText);

            document.body.appendChild(op);

        }

        var d2 = new Date();

        document.write("方法一用时：" + (d2.getTime() - d1.getTime()) + "<br/>");
        alert(d2.getTime() - d1.getTime());

        //---+-----

        var d3 = new Date();

        var oFrag = document.createDocumentFragment();

        for (var i = 0; i < 1000; i++) {

            var op = document.createElement("P");

            var oText = document.createTextNode("test2");

            op.appendChild(oText);

            oFrag.appendChild(op);

        }

        document.body.appendChild(oFrag);

        //这段代码中

        var d4 = new Date();

        document.write("方法二用时：" + (d4.getTime() - d3.getTime()) + "<br/>");
        alert(d4.getTime() - d3.getTime());

    </script>

</body>

</html>
PS. 比较方法一和方法二程序执行所须要的时间，应该是方法一大于方法二。html