DOM碎片化

来源：互联网发布：张佳玮知乎编辑：程序博客网时间：2024/06/06 08:34

下面的代码看起来有点神经质，仅仅是个demo

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>文档碎片性能测试——普通方法</title>    <script>    window.onload = function() {        var oBtn = document.getElementById("btn1");        var oUl = document.getElementById("ul1");        var iStart = new Date().getTime(); //开始执行的时间        oBtn.onclick = function() {            //普通追加            for (var i = 0; i < 1000; i++) { //使用for循环创建100000个li节点，并一个个的挂载在ul下面                var oLi = document.createElement("li");                oUl.appendChild(oLi);                            }             console.log(new Date().getTime() - iStart); //打印出最后这个程序耗费的而时间                   }    }    </script></head><body>    <input id="btn1" type="button" value="普通" />    <ul id="ul1">        <li>li</li>    </ul></body></html>

碎片化:

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>文档碎片性能测试</title>    <script>    window.onload = function() {        var oBtn = document.getElementById("btn1");        var oUl = document.getElementById("ul1");        var iStart = new Date().getTime();        oBtn.onclick = function() {            //文档碎片方式            var oFrag = document.createDocumentFragment(); //建立一个文档对象，作为新增节点的临时容器，最后将这个容器连的内容直接挂载在父节点ul下面。            for (var i = 0; i < 10000; i++) {                var oLi = document.createElement("li");                oFrag.appendChild(oLi);            }            oUl.appendChild(oFrag);            console.log(new Date().getTime() - iStart);        }    }    </script></head><body>    <input id="btn1" type="button" value="碎片" />    <ul id="ul1">        <li>li</li>    </ul></body></html>

碎片化就是操作一个文档对象，挂载结束后再一次性append到实际DOM上面去，理论上性能比多次操作dom高，个人感觉与拼字符串异曲同工

0 0