下面的代碼看起來有點神經質，僅僅是個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高，個人感覺與拼字符串異曲同工
新聞熱點
疑難解答
