<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
//最慢,innerHTML使用拼接字符串的方式创建新的元素
function fn1() {
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>';
document.body.innerHTML += '<div>100px</div>';
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn1();
//最快,innerHTML使用数组的方式创建新的元素
function fn2() {
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>');
array.push('<div>100px</div>');
}
document.body.innerHTML = array.join('');
var d2 = +new Date();
console.log(d2 - d1);
}
fn2();
//稍慢,createElement创建新元素
function fn3() {
var d1 = +new Date();
for (var i = 0; i < 1000; i++) {
var div = document.createElement('div');
div.innerHTML = '100px';
// 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);
}
fn3();
</script>
</html>
1,innerHTML
字符串拼接方式效率特别低;
2,innerHTML
使用 字符串 拼接创建元素时效率低于createElement()
;
3,当innerHTML
使用数组创建元素时效率要高于createElement()
;