Prefacio:
En la operación del nodo DOM, innerHTMLy createElementpuede realizar la creación de elementos. Las funciones que implementan son similares, pero la eficiencia es muy diferente. Este artículo cuenta respectivamente el tiempo de creación de 1000 elementos con el innerHTMLmétodo de empalme de cadenas, el innerHTMLmétodo de matriz y el createElementmétodo para comparar la eficiencia entre ellos.
Ideas de comparación:
- Usar
newllamada para crear un objeto de fecha - El tiempo después de crear el mismo elemento 1000 veces, menos el tiempo antes de la creación, es el tiempo empleado en el proceso (unidad: ms)
- Compara el tiempo que tardan los tres métodos
Proceso de comparación:
Código:
<!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>
El tiempo invertido:
para resumir:
- Claramente, el tiempo utilizado de tres maneras:
innerHTML字符串拼接方式>>createElement方式>innerHTML数组方式 - El nivel de eficiencia de tres maneras:
innerHTML数组方式>createElement方式>innerHTML字符串拼接方式 - Puede elegir el método apropiado según la situación real