序文：
DOMノード操作で、innerHTMLかつcreateElement要素の作成を実現することができます。それらが実装する機能は似ていますが、効率は大きく異なります。この記事では、innerHTMLストリングスプライシングメソッド、innerHTMLアレイメソッド、およびcreateElementメソッドを使用して1000個の要素を作成する時間をそれぞれカウントし、それらの間の効率を比較します。
比較のアイデア：
new呼び出しを使用して日付オブジェクトを作成します- 同じ要素を1000回作成した後、作成前の時間を差し引いた時間は、プロセスに費やされた時間です（単位：ms）
- 3つの方法にかかる時間を比較します
比較プロセス：
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>';
}
var d2 = +new Date();
console.log(d2 - d1);
}
// 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>');
}
document.body.innerHTML = array.join('');
var d2 = +new Date();
console.log(d2 - d1);
}
// createElement方式
function fn3() {
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);
}
fn1(); // innerHTML字符串拼接方式
fn2(); // innerHTML数组方式
fn3(); // createElement方式
</script>
</body>
</html>
費やした時間：
総括する：
- 明らかに、3通りの方法で使用される時間：
innerHTML字符串拼接方式>>createElement方式>innerHTML数组方式 - 3つの方法で効率のレベル：
innerHTML数组方式>createElement方式>innerHTML字符串拼接方式 - 実際の状況に応じて正しい方法を選択できます