wordpress优点缺点,小程序seo推广技巧,免费网站空间 推荐,肇庆手机台app下载三种创建元素方式区别
document.write() 会导致页面重绘innerHTML 使用拼接方式会导致只能用内存过多，效率过低 建议使用数组（结构稍微负责）document.createElement() 创建多个元素效率稍低一点 结构更清晰 注意：在不同浏览器下 …
三种创建元素方式区别
- document.write() 会导致页面重绘
- innerHTML 使用拼接方式会导致只能用内存过多，效率过低 建议使用数组（结构稍微负责）
- document.createElement() 创建多个元素效率稍低一点 结构更清晰
注意：在不同浏览器下 innerHTML 比createElement()效率高
<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>
- innerHTML拼接效率测试
- 大约3000毫秒左右
<script>function fn() {var d1 = +new Date();var str = '';for (var i = 0; i < 1000; i++) {document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';}var d2 = +new Date();console.log(d2 - d1);}fn();
</script>
- innerHTML数组效率测试
- 大约8毫秒左右
<script>function fn() {var d1 = +new Date();var array = [];for (var i = 0; i < 1000; i++) {array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');}document.body.innerHTML = array.join('');var d2 = +new Date();console.log(d2 - d1);}fn();
</script>
- createElement效率测试
- 大约20毫秒左右
<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>