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

相關標籤/搜索

document.createdocumentfragment

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。