1

Tengo una tabla HTML en un proyecto PHP la cual se llena con datos desde MYSQL, el Select con el que lleno la tabla esta conformado entre otras cosas por 3 INNER JOIN, al ejecutar la consulta desde Workbenck esta demora 0,428 segundos aproximadamente en realizarla pero al entrar a la pagina que contiene la tabla HTML se demora entre 5 y 6 segundos en ejecutarla lo cual me parece que es un muy alto tiempo dado que apenas son 600 registros.

La forma en que lleno la tabla es llamando los getters que obtengo de query, algo como esto:

<table>
       <?php foreach($consulta as $data): ?>
       <tr>
       <td><?php echo $data->getNombre() ?>
                                </td>
       <td><?php echo $data->getCiudad() ?>
       </td>
       <?php  endforeach; ?>
       </tr>
</table>

7
  • 1
    Por favor agrega tu consulta
    – user75901
    el 22 jul. 2018 a las 13:18
  • 1
    Esta es la consulta: ` $resultado=$db->query('SELECT identidad, nombre, estado.descripcion as id_estado, item.descripcion as id_producto, server.descripcion as id_equipo, correo FROM clientes INNER JOIN estado ON estado.id_estado=clientes.id_estado INNER JOIN item ON item.id_producto=clientes.id_producto INNER JOIN server ON server.id_equipo=clientes.id_equipo ORDER BY nombre'); `
    – wico
    el 22 jul. 2018 a las 14:15
  • 1
    Esos extraños getter... ¿de qué se trata? Mapeas los resultados de la consulta a alguna clase? ¿Es necesario hacerlo en este caso? Aunque no debería ser lento por eso. ¿Probaste sin los getter? ¿Las tablas están indexadas correctamente?
    – A. Cedano
    el 22 jul. 2018 a las 14:44
  • 1
    Si correcto mapeo los resultados de la consulta a una clase
    – wico
    el 22 jul. 2018 a las 14:47
  • 1
    ¿Las tablas están indexadas correctamente? Puedes verificar el plan de ejecución de la consulta poniendo delante de la misma la palabra EXPLAIN , la ejecutas en el manejador y analizas los resultados. ¿La consulta y/o los datos en sí funciona bien (no hay ningún JOIN díscolo que genere una enorme cantidad de filas).
    – A. Cedano
    el 22 jul. 2018 a las 14:49

2 respuestas 2

1

Se me ocurren un par de cosas que tal vez te puedan ayudar:

  1. Agrega el atributo table-layout:fixed a la tabla. Cada vez que el navegador renderiza una tabla debe calcular las dimensiones del contenido de cada celda y ajustar la tabla completa, con este atributo se define un valor fijo.

  2. Veo que iteras un objeto y por cada ciclo del array tienes que llamar dos métodos, eso es mas lento que imprimir directamente los valores del array obtenido por un fetch. Para ese caso, tendrías que hacer de $consulta un array de los datos que necesitas usando fetch(). No sé si en tu caso te sirva.

  3. Podrías aplicar paginación para no tener que cargar todos los datos, si es que no afecta lo que quieres.

  4. Intentar hacer una tabla con Scrolling infinito, de manera que solo se carguen los datos a medida que vas subiendo o bajando por la tabla. En esta web hay una implementación de ello: http://hrily.co/blog/2017/05/20/rendering-large-html-tables.html

1

Si quieres optimizar el proceso de carga no uses tablas, en su lugar usa divs.

Entre las razones que te puedo mencionar están:

  • Las tablas se renderizan de un solo, cuando se han cargado todos los elementos de su interior, esto quiere decir que primero intentará bajar la imagen de 2 megas antes de siquiera empezar a pintar, y si es una tabla interna hará esperar a la tabla que lo embebe.
  • No son accesibles, es decir, un invidente nunca podrá sacar ventaja de tu tabla
  • Afecta tu posicionamiento en búsquedas (SEO)
    • La única información semántica que proveen es que se trata de una tabla
  • Debes generalmente poner trabajo extra si quieres que se impriman
  • No son responsivas

imagen demostrad que las tablas no son responsivas

Fuentes:

  1. Por qué deberías evitar usar tablas para distribución de elementos web
  2. Tablas de datos responsivas

Tu Respuesta

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

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