创建节点三种方式和性能比较
一、创建节点三种方式
(一)document.write()
注意如果页面已经加载完成,再调用会导致页面重绘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<script>
document.write('<h3>Hello World!</h3>');
</script>
</body>
</html>
(二)element.innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<script>
document.body.innerHTML = '<h3>Hello World!</h3>';
</script>
</body>
</html>
(三)document.createElement()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<script>
var h3 = document.createElement('h3');
h3.innerText = 'Hello World!';
document.body.appendChild(h3);
</script>
</body>
</html>
二、性能测试
因为document.write()每次都会导致页面重绘,并且本身也有很大的局限性所以不在测试
(一)document.body.innerHTML性能测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<script>
var startTime = new Date();
for (var i = 0; i < 1000; i++) {
// 注意此处大量字符串拼接严重影响性能
document.body.innerHTML += `<h3>Hello World!</h3>`;
}
var overTime = new Date();
console.log(overTime.getTime() - startTime.getTime())
</script>
</body>
</html>
测试结果:平均在340毫秒左右
(二)document.createElement()性能测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<script>
var startTime = new Date();
for (var i = 0; i < 1000; i++) {
var h3 = document.createElement('h3');
h3.innerText = 'Hello World!';
document.body.appendChild(h3);
}
var overTime = new Date();
console.log(overTime.getTime() - startTime.getTime())
</script>
</body>
</html>
测试结果:平均在2毫秒左右
(三)document.innerHTML优化字符串拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<script>
var startTime = new Date();
var buf = new Array();
for (var i = 0; i < 1000; i++) {
// 此处优化字符串拼接
buf.push(`<h3>Hello World!</h3>`);
}
document.body.innerHTML = buf.join('');
var overTime = new Date();
console.log(overTime.getTime() - startTime.getTime())
</script>
</body>
</html>
测试结果:平均在1毫秒左右
三、总结
总结偏个人主观,紧供参考
- document.write()只能以整个文档为单位操作,并且在页面加载完成过后调用会导航整个页面重绘不推荐使用。
- document.innerHTML在数组拼接下速度相比document.createElement()快1倍左右。
- document.innerHTML在程序处理嵌套结构时结构不如document.createElement()清析。
- 日常使用推荐document.createElement()在处理数据时结构更清晰,方便后期维护并且现在出现有大量数据需要网页显示,一般都是通过分页显示,同时不显示大量数据,当出现有大量数据又需要同时在网页显示性能优先可以考虑document.innerHTML。