<!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> <button>点击</button> <p>abc</p> <div class="inner"></div> <div class="create"></div> <script> // window.onload = function() { // document.write('<div>123</div>'); // } // 三种创建元素方式区别 // 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘 // var btn = document.querySelector('button'); // btn.onclick = function() { // document.write('<div>123</div>'); // } // 2. innerHTML 创建元素 var inner = document.querySelector('.inner'); // for (var i = 0; i <= 100; i++) { // inner.innerHTML += '<a href="#">百度</a>' // } var arr = []; for (var i = 0; i <= 100; i++) { arr.push('<a href="#">百度</a>'); } inner.innerHTML = arr.join(''); // 3. document.createElement() 创建元素 var create = document.querySelector('.create'); for (var i = 0; i <= 100; i++) { var a = document.createElement('a'); create.appendChild(a); } </script> </body> </html>
innerHTML拼接效率测试:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>效率测试</title> </head> <body> </body> <script> function fn() { var d1 = +new Date(); var str = ''; for (var i = 0; i < 1000; i++) { document.body.innerHTML += '<div style="100px; height:2px; border:1px solid blue;"></div>'; } var d2 = +new Date(); console.log(d2 - d1); } fn(); </script> </html>
innerHTML数组效率测试:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>效率测试</title> </head> <body> </body> <script> function fn() { var d1 = +new Date(); var array = []; for (var i = 0; i < 1000; i++) { array.push('<div style="100px; height:2px; border:1px solid blue;"></div>'); } document.body.innerHTML = array.join(''); var d2 = +new Date(); console.log(d2 - d1); } fn(); </script> </html>
createElement效率测试:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>效率测试</title> </head> <body> </body> <script> function fn() { var d1 = +new Date(); for (var i = 0; i < 1000; i++) { var div = document.createElement('div'); div.style.width = '100px'; div.style.height = '2px'; div.style.border = '1px solid red'; document.body.appendChild(div); } var d2 = +new Date(); console.log(d2 - d1); } fn(); </script> </html>