JQuery ajax congela ui cuando la respuesta es muy grande

Question

Cuando uso la función JQuery ajax y la respuesta es bastante grande ~ 1mb, el ui se congela justo antes de que se llame a la función de éxito. He experimentado esto con la función JSON.parse y analizando una gran cantidad de datos. Creo que esta función se utiliza en la devolución de la solicitud para formatear el contenido en JSON. Aquí está el código que estoy usando.

$.ajax({ 
     url: "/sessions/" + this.get("session_id") + "/get_sample_data", 
     data: params, 
     dataType: 'json', 
     type: "GET", 
     success: function (response) { 
      success(response); 
     } 
    }); 

¿Hay alguna forma para anular el código de la respuesta para que pueda escalonar el análisis en partes y es de esperar minimizar el bloqueo en la interfaz de usuario? o hay otra forma de arreglar esto. Estoy usando cromo y cromo canario y obtengo el mismo resultado en ambos.

Gracias de antemano

Answer 1

La suposición es que analizar una respuesta JSON gigante es lo que causa el retraso. Si ese es el caso, tiene estas opciones:

1. Divida la respuesta del servidor en varias solicitudes.
2. Divida el análisis sintáctico en varias piezas.
3. Envíe la respuesta a un trabajador web y analícela en un trabajador web (no funciona en navegadores más antiguos).

para romper el análisis en varias piezas, que tendría que cambiar la llamada AJAX jQuery para simplemente devolver el texto en bruto y que tendría que crear su propio analizador JSON que podría hacer el trabajo en trozos en setTimeout() para que la interfaz de usuario pueda mantenerse con vida durante el análisis. Esta sería una cantidad de trabajo razonable. Supongo que comenzarías con un analizador JSON existente y luego tendrías que modificarlo para guardar su estado de forma que pudiera funcionar en fragmentos.

Cambiar la interfaz del servidor para recuperar piezas de JSON es probablemente la forma más fácil de resolver el problema si puede modificar la interfaz del servidor de forma adecuada.

Para algunas ideas alternativas sobre cómo procesar datos de gran tamaño en trozos, se puede ver Best way to iterate over an array without blocking the UI