write、innerHTML、createElement区别
1、document.write() 创建元素
document.write 是直接将内容写入页面的内容流,但是页面文档流加载完毕,再调用这句话会导致页面重绘。
如下面代码:
<button>点击</button>
<p>abc</p>
<div class="inner"></div>
<div class="create"></div>
<script>
var btn = document.querySelector('button');
var div = document.write('<div>123</div');
btn.onclick = function() {
var div = document.write('<div>123</div');
}
</script>
运行代码,页面加载完毕后,效果:
如果点击按钮调用 document.write() ,会导致页面重绘,效果
2、innerHTML创建元素与效率测试
innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘。
创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂。
1) innerHTML拼接字符串方式
案例代码
<div class="inner"></div>
<div class="create"></div>
<script>
var inner = document.querySelector('.inner');
for (var i = 0; i <= 100; i++) {
inner.innerHTML += '<a href="#">百度</a>'
}
</script>
运行结果
下面测试一下代码执行效率
<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>
测试效率在1300毫秒左右
2)innerHTML采取数组拼接方式
案例代码
<div class="inner"></div>
<div class="create"></div>
<script>
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
</script>
运行结果
测试效率代码
<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>
测试效率几毫秒
3、document.createElement() 创建元素与效率测试
createElement()创建多个元素效率稍微低一点点,但是结构更清晰。
案例代码
<div class="inner"></div>
<div class="create"></div>
<script>
// 3. document.createElement() 创建元素
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
</script>
运行结果
效率测试
<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>
效率为十几毫秒
4、区别
1、 document.write 是直接将内容写入页面的内容流,但是页面文档流加载完毕,再调用这句话会导致页面重绘。
2、innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘。
3、创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂。
4、createElement()创建多个元素效率稍微低一点点,但是结构更清晰。
5、总结
不同浏览器下,innerHTML 效率要比createElement高。