documen.write()
用的少
直接将内容写入页面的内容流,但是文档流执行完毕,它会导致页面重绘
类似 window.onlond() = function{} //整个页面加载完成再调用js
inner.innerHTML
document.createElement()
<div class = "inner">...</div>
<div class = "create">...</div>
var inner = document.querrySelector('.inner')
var create = document.querrySelector('.create')
inner.innerHTML = '<a href="#">hello</a>'
var a = document.createElement('a')
create.appendChild(a)
创建单个元素时,两者没有什么差别
创建1000次
innerHTML 3000毫秒(字符串拼接)
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();
.createElement() 20毫秒
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();
innerHTML 10毫秒以下(数组)
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();