創建節點三種方式和性能比較
一、創建節點三種方式
（一）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。