Bien, estos últimos días he estado optimizando una tabla de clientes.
Hay muchos clientes de más de 10k y, obviamente, la mesa tardó años en cargarse. El equipo de front-end hizo la paginación + filtros + reordenación y quería que siguiera siendo así.
Así que comencé tratando de inyectar HTML renderizado a través de AJAX, lo que obviamente apestaba. fue aceptablemente rápido, pero la memoria gigantesca, la mesa fue muy lenta después.
Entonces, después de eso, intenté cargar los datos a través de AJAX en formato JSON y agregarlos a la tabla con javascript.
Probé varios métodos para hacer esto, el mejor era 500-1000 clientes a la vez, pero me llevó más de 30 segundos completar la tabla y, mientras tanto, la página era lenta.
Seguí adelante y logré reducir algunos segundos en el backend, pero aún así, si simplemente cargaba la API en el navegador, los resultados aparecían instantáneamente y no tomaban más de 10 segundos por llamada.
Fue entonces cuando probé XMLHttpRequest, que arrojó más o menos los mismos resultados. Y luego descubrí fetch, que es increíble. con fetch ahora se tarda menos de 3 segundos en cargar completamente la mesa.
¿Mi pregunta es, porque? sí, probablemente podría averiguar por qué si me sumerjo en los documentos, pero simplemente estoy muy ocupado y muy curioso, seguramente alguien ya lo sabe.
PD: si alguien tiene curiosidad sobre el código que estoy usando:
Mejor solución (buscar)
for (var jj of {{ ret|safe }}) { fetch("/clients/table/build1/?start="+String(jj)).then(function (response) { response.json().then(function (request) { for (let i = 0; i < request['results'].length; i++) { $("#myAllClient_1").DataTable().row.add(<<CLIENT DATA>>) } $("#myAllClient_1").DataTable().draw(false); <<bit more code>>código ajax lento:
$.ajax({ method: "GET", dataType: "JSON", url: "/clients/table/build1/?start=" + snum, success: function (data) { for (let i = 0; i < data['results'].length; i++) { $("#myAllClient_1").DataTable().row.add(<<CLIENT DATA>>); } $("#myAllClient_1").DataTable().draw(false); <<bit more code>> })PS2: el siguiente paso para la optimización es deshacerse del ciclo "row.add" y simplemente obtener los datos ya organizados y listos para ingresar en esa función de agregar sin el ciclo
La respuesta se puede encontrar en este tweet de Alex Russel (Equipo de Google Chrome):
fetch()será lo mismo que XHR a nivel de red, pero para cosas como la decodificación de JSON, puede hacer ese trabajo fuera del subproceso porque el contrato de la API se basa en promesas por adelantado.
Por lo tanto, todo se reduce a una mejor compatibilidad con subprocesos múltiples en el lado del navegador para fetch + json, mientras que la implementación de ajax realizará la solicitud y luego el análisis de json (sincrónico) en el subproceso de JavaScript.
Esto probablemente también signifique que fetch podría ser "peor" que ajax en el caso muy extraño en el que llamarías a una API json, pero en realidad nunca analizarías el json (tratándolo como texto sin formato en lugar de fi). Aunque es posible que esto ni siquiera se muestre en los tiempos, y solo en un mayor uso de la CPU (el análisis json ocurre en otro hilo, pero nunca se usa).