下面的代码看起来有点神经质，仅仅是个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高，个人感觉与拼字符串异曲同工
新闻热点
疑难解答
