1

Estoy creando una tabla de n filas y n columnas donde n es el numcombinaciones y tengo una matriz con todos los datos de la tabla.

El primer for hace la fila y el segundo las columnas de la misma tomando el valor de la matriz okas, he estado investigando un poco sobre los diferentes métodos para hacerlo un poco más rápido, pero la verdad es que algunas veces la información difiere mucho (no sólo por el tipo de navegador), por ello espero me orienten a saber cuál método sería el más rápido.

He aquí el código:

table = document.getElementsByTagName("table")[0], tr = [];
for (i = 0; i < numcombinaciones; i++) {
    formula = numcombinaciones*i;
    endl = formula+numcombinaciones;
    tr = document.createElement("tr");
    div = document.createElement("div");
    ted = document.createElement("td");
    ted.className = "trmother";
    div.className = "trmotherdiv";
    div.textContent = combm[i];
    ted.appendChild(div);
    tr.appendChild(ted);
    for (j = formula; j < endl; j++) {
        var td = document.createElement("td");
        td.className = "okas";
        td.textContent = okas[j];
        tr.appendChild(td);
    }
    table.appendChild(tr);
}

Por cierto, el navegador para el cual prefiero orientarme por el tipo de personas a usar este script es Chrome, por si sirve de algo.

Gracias.

2 respuestas 2

2

Tu código lo veo correcto, y si quieres utilizar javascript nativo no hay mucha opción para mejorarlo a no ser que quieras meterlo todo en un churro.

Personalmente utilizaría jQuery si no quieres tener lios de navegadores.

Este es tu código pasado a jQuery y simplificado un poco bastante ;-)

jQuery también tiene funciones para ir añadiendo elementos al DOM tal y como haces tú, pero como tu código es bastante fijo en cuanto al html que genera así lo veo correcto.

var numcombinaciones = 2;
var combm = new Array(1,2);
var okas = new Array('a','b', 'c', 'd');
var tr = new Array();
var cad = '';

for (i = 0; i < numcombinaciones; i++) {
  formula = numcombinaciones * i;
  cad+= '<tr><td class="trmother"><div class="trmotherdiv">' + combm[i] + '</div>';
  for (j = formula; j < formula + numcombinaciones; j++) {
    cad+= '<td class="okas">' + okas[j] + '</td>';
  }
  cad+= '</tr>';
}
$('#tabla').append(cad);
table, td {
border: solid 1px black;
padding: 3px;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tabla'>
</table>

8
  • 1
    Intenta minimizar el número de veces que el navegador tiene que modificar el DOM de la página. Recuerda siempre esta regla de oro: es mejor hacer algo con mil cosas una vez que hacerlo con una cosa mil veces. Otro consejo, siempre que generes HTML, hazlo en un array, utilizando push() para cada línea nueva. Al final, haces un join("\n"). Con tablas muy grandes es mucho más rápido que concatenar strings, porque no tienes que ir copiando la cadena entera cada vez. Commented el 17 jul. 2017 a las 11:55
  • Si te fijas en el código que no sé si has leído sólo se hace UN append. En cuanto a lo de los arrays tienes razón, pero no quería complicar aún más el ejemplo.
    – NetVicious
    Commented el 17 jul. 2017 a las 12:25
  • Sí, perdona, el comentario era para Benjamin. Tu solución me parece muy buena. De hecho el voto es mío :) Commented el 17 jul. 2017 a las 13:05
  • JQuery es muy comodo y hace el código muy facil de leer, lo malo es que es una capa más y eso te puede quitar performance. El ejemplo que pones se ve muy bonito pero lo malo es que JQuery tiene que parsear todo el HTML que le estas pasando como string y eso es muy costoso y si tienes una tabla con muchos datos te va a alentar mucho el proceso.
    – Lato
    Commented el 17 jul. 2017 a las 15:19
  • En este Benchmark pueden ver la diferencia de crear un elemento de JQuery usando texto y un elemento nativo
    – Lato
    Commented el 17 jul. 2017 a las 15:32
1

Usar javascript puro es lo mejor para incrementar el performance aunque eso implique más trabajo

Tu código se ve bien aunque se puede pulir un poco más.

Para los array's es mejor usar los corchetes que new Array aquí el por qué

Estas creando una array con todos tus TR pero es mejor usar una variable normal, si necesitas acceder despúes a un TR puedes hacerlo por medio de tabla.childNodes[indexTR]

 var tr = new Array(); // mejor var tr;

 //Es mejor usar tr.push que calcular el índice, sólo si decides usar arreglos
 tr[i + 1] = document.createElement("tr");

Estamos acostumbrados a hacer mal los for´s en la condición estas poniendo una suma que se calcula una y otra vez

for (j = formula; j < formula + numcombinaciones; j++)
//Mejor hacerlo asi
var total = formula + numcombinaciones;
for (j = formula; j < total; j++)

Aquí una pequeña prueba de que siempre se ejecuta lo que tengas en la condición del for

function limite(){
  console.log("Leer limite")
  return 3;
}

for(var i = 0; i < limite(); i++)
  console.log(i);

Los cambios se ven insignificantes y lo serán si tienes tablas pequeñas pero de gran ayuda con miles de datos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.