13

Mi problema es que tengo múltiples ajax (en total 10) para realizar peticiones a ciertos recursos.

Según chrome (también ocurre en los demás navegadores):

Cola. (Queueing) El navegador pone en cola las solicitudes cuando:

  • Hay solicitudes de mayor prioridad.
  • Ya hay seis conexiones TCP abiertas para este origen, que es el límite. Se aplica solo a HTTP / 1.0 y HTTP / 1.1.
  • El navegador está asignando brevemente espacio en la memoria caché del disco.

Atascado. (Stalled) La solicitud podría detenerse por cualquiera de los motivos descritos en la cola.

En mi caso es por que son mas de 6 conexiones (10), se añade "stalled" a las últimas 4, y el tiempo añadido es equivalente (mas o menos) a el tiempo de las 4 consultas mas rápidas que se envían en el primer bloque de 6.

Por verlo de otro modo, hay un bloque de 6 peticiones y una cola de 4, y cuando una consulta de este bloque acaba se ejecuta una de las que estaban en cola, así hasta que no quedan peticiones en cola.

Agrupar las peticiones ajax no es una opción ya que la idea es usar la asincronía de JS para que se realicen todas las peticiones al mismo tiempo y así reducir tiempos.

Me interesa una solución que pueda ser compatible con IE9+, pero cualquier respuesta que sea solo para navegadores mas modernos es también bien recibida.


En el backend las peticiones llegan a un método serveResource (de liferay) que he sobrescrito, y dependiendo el tipo de recurso que se solicite por parámetro se devuelve un recurso u otro.

@Override
public void serveResource(ResourceRequest resourceRequest, ResourceResponse resourceResponse) {
    String recurso = ParamUtil.getString(resourceRequest, "recurso");
    switch(recurso){
        ...
    }
}

Mis ajax son algo así:

$.ajax({
    type: "POST",
    url: "/miPortlet?recurso=tartas&masParametros=todosIguales",
    dataType: 'json',
    beforeSend: funcionAntesDeAjax,
    success: function(data){
        ...
    },
    error:function(xhr,textstatus,message){
        ...
    }
});

La url del ajax varia solo en un parámetro recurso=tartas en cada uno es un recurso diferente.

He leído el siguiente hilo en ingles: Chrome stalls when making multiple requests to same resource?. Donde se comenta que este comportamiento se debe a que Chrome bloquea la caché y espera ver el resultado de una solicitud antes de volver a solicitar el mismo recurso.

He probado con diferentes soluciones que comentan en ese hilo como:

  • Añadir cabeceras a la petición (Cache-Control: no-cache, no-store o Cache-Control: no-store) mediante headers y mediante el beforeSend.
  • Añadir propiedad cache: false con los ajax en método post/get
  • Añadir un numero aleatorio como parámetro para diferenciar la URL (ya era diferente)
10
  • ¿Puedes cambiar el API de backend? Quizá deberías agrupar las peticiones Commented el 2 mar. 2020 a las 15:30
  • Las peticiones son independientes o depende una de la otra? Commented el 2 mar. 2020 a las 15:30
  • @IgmerRodriguez Si se hacen todas a la vez, en paralelo, parecen independientes Commented el 2 mar. 2020 a las 15:33
  • En el backend todo va a un método serveResource (de liferay), yo lo que hago es dependiendo del parametro recurso devolver un recurso u otro (con un switch). Y son todas las peticiones independientes (por eso quiero evitar que las ponga en cola).
    – x3k
    Commented el 2 mar. 2020 a las 15:33
  • 1
    ¿Cambiar el servidor web a HTTP/2(SPDY) no es una opción? (Soporte Multiplexación, una sola conexión TCP para todas las solicitudes). Lastima el soporte para IE9+
    – Marcos
    Commented el 30 sept. 2020 a las 15:01

3 respuestas 3

0

Una posible solución es agrupar las peticiones en grupos de 6. En jQuery la función $.ajax retorna una promesa, lo que permite que puedas agrupar y esperar que todas se resuelvan, utilizando el método $.when, antes de continuar ejecutando el código. Ejemplo:

var request1 = $.get("https://jsonplaceholder.typicode.com/todos/1");
var request2 = $.get("https://jsonplaceholder.typicode.com/todos/2");
var request3 = $.get("https://jsonplaceholder.typicode.com/todos/3");
var request4 = $.get("https://jsonplaceholder.typicode.com/todos/4");
var request5 = $.get("https://jsonplaceholder.typicode.com/todos/5");
var request6 = $.get("https://jsonplaceholder.typicode.com/todos/6");

$.when(
  request1,
  request2,
  request3,
  request4,
  request5,
  request6
).done(function (response1, response2, response3, response4, response5, response6) {

  console.log("GROUP 1");
  console.log(response1[0].title);
  console.log(response2[0].title);
  console.log(response3[0].title);
  console.log(response4[0].title);
  console.log(response5[0].title);
  console.log(response6[0].title);

  var request7 = $.get("https://jsonplaceholder.typicode.com/todos/7");
  var request8 = $.get("https://jsonplaceholder.typicode.com/todos/8");
  var request9 = $.get("https://jsonplaceholder.typicode.com/todos/9");
  var request10 = $.get("https://jsonplaceholder.typicode.com/todos/10");

  $.when(
    request7,
    request8,
    request9,
    request10
  ).done(function (response7, response8, response9, response10) {
    console.log("GROUP 2");
    console.log(response7[0].title);
    console.log(response8[0].title);
    console.log(response9[0].title);
    console.log(response10[0].title);
  });
});

En este articulo puedes ver un paso a paso del uso de $.ajax con $.when: https://www.arquitecturajava.com/jquery-promise-y-ajax/

Aquí también puedes encontrar la documentación de esos métodos:

Finalmente, te quiero comentar que si tu plataforma recibe muchas peticiones en paralelo, puede que te topes con un cuello de botella por el lado de tu servidor de http o tu pool de conexiones a la base de datos. En ese caso debes buscar alguna manera de escalar tu backend.

2
  • Esto no responde a la pregunta. Agrupar las peticiones ajax no es una opción ya que la idea es usar la asincronía de JS para que se realicen todas las peticiones al mismo tiempo y así reducir tiempos. Ademas de que la cola de los navegadores ya consigue un efecto parecido y a mi modo de ver mejor que con agrupaciones como lo sugieres, ya que no tiene que acabar el grupo entero para empezar a ejecutar la siguiente. La alternativa tomada fue reducir el numero de llamadas, agrupándolas, pero en el backend.
    – x3k
    Commented el 12 may. 2020 a las 7:37
  • Tienes razón, es mucho mejor reducir la cantidad de llamadas agrupándolas en el backend.
    – Jorge Soto
    Commented el 12 may. 2020 a las 13:21
0

Disculpa por mi humilde idea. Por lo que veo tenes un limite a nivel de reglas del navegador que veo imposible que puedas cambar con código de programación y por otro lado del navegador IE que te impide utilizar otras apis. No se que lenguaje de programación utilizas en el servidor pero se me ocurre que podes crear en el servidor multiples recursos/resources/url o nombres de paginas para rotar las peticiones. Y del lado servidor una clase que englobe las peticiones para no tener el codigo repetido en cada recurso/url/pagina

Ejemplo del lado javascript:

var urls = ["miPortlet1","miPortlet2", "miPortlet3" , "miPortlet4"];
var indexRecursoActual = -1;

function enviarDatos(){

  //Rotar urls.
  indexRecursoActual++;
  if (indexRecursoActual > (urls.length-1)){
      indexRecursoActual=0;
  }

   $.ajax({
    type: "POST",
    url: "/" + urls[indexRecursoActual] + "?recurso=tartas&masParametros=todosIguales",
    dataType: 'json',
    cache:false,
    beforeSend: funcionAntesDeAjax,
    success: function(data){
        ...
    },
    error:function(xhr,textstatus,message){
        ...
    }
});
}
-1

si tienes la posibilidad de utilizar microservicios en tu back end, tambien puedes agrupar las llamadas a una sola, sin modificar tus 10 llamadas iniciales

Tu front end llama a un método del servicio, luego esa llamada haces las 10 peticiones y devuelves la respuesta cuando se hayan completado las respuestas de esas 10 peticiones.

Eso te da la posibilidad de no modificar tus servicios.

Saludos

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.