16textNode.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> window.onload = function() { /* var oDiv = document.createElement("div"); var oTxt = document.createTextNode("hi"); oDiv.appendChild(oTxt); document.body.appendChild(oDiv); */ // 在页面中打印999个按钮 var t1 = new Date().getTime(); /* for(var i=0; i<999; i++) { document.body.innerHTML += "<input type='button' value='按钮'/>"; } // 2193 */ /* var str = ""; for(var i=0; i<999; i++) { str += "<input type='button' value='按钮'/>"; } document.body.innerHTML = str; // 4 */ // 文档碎片 === 缓存 var cache = document.createDocumentFragment(); for(var i=0; i<9999; i++) { var opt = document.createElement("input"); opt.type = "button"; opt.value = "按钮"; cache.appendChild(opt); } document.body.appendChild(cache); var t2 = new Date().getTime(); console.log(t2-t1); } </script> </body> </html>