Estoy usando una función jQuery AJAX simple que se ejecuta extremadamente lento (10-15 segundos) la primera vez que se llama, y luego se ejecuta normalmente en <1 - 2 segundos cada vez que se llama después de esa primera vez. No puedo entender por qué sucede esto, pero necesito acelerarlo tanto como sea posible. Aquí está la función:
function getNewItemAlt(apiUrl, callType, apiKey, dataType, returnValue, appendToWrapper) { // ajax call to the api return $.ajax({ type: callType, url: apiUrl, data: apiKey, dataType: dataType, success: function(result) { appendToWrapper.closest('.game_play_area').find('.game_loader').remove(); // this is the thing that we want (probably either // an image url or an actual value) var desiredReturn = deepValue(result, returnValue); var specialClass = ''; console.log(typeof desiredReturn) if (typeof desiredReturn === 'number') { specialClass = 'number' } // if it's a URL then it's an image and can be setup // in an imgage tag and added to the dom if (desiredReturn.toString().substring(0, 4) == "http") { $(appendToWrapper).children('.game_image').remove(); $(appendToWrapper).prepend('<img class="game_image" src="' + desiredReturn + '" />'); } else { $(appendToWrapper).children('.game_value_return').remove(); $(appendToWrapper).prepend('<p class="game_value_return ' + specialClass + '">' + desiredReturn + '</p>'); } // clear the space to play the game // $(currentGameWrapper).children('.game_intro').remove(); // show the game // currentGameWrapper.children('.game_play_area').removeClass('hide'); }, error: function(err) { console.log(err); } }); }Un ejemplo de una API a la que estoy haciendo una solicitud es la API de Giphy. No estoy convencido de que sea un problema del servidor porque ocurre solo en la primera llamada a la API y luego las llamadas posteriores son rápidas.
¿Alguna idea de por qué sucede esto y qué se puede hacer para que se ejecute más rápido?
Teniendo en cuenta todo el problema, Javascript (lado del cliente) + API (lado del servidor) podría complicar el diagnóstico del problema, por lo que mi sugerencia para obtener una respuesta más específica sería aislar el problema primero.
Respondiendo a su pregunta general, ¿Por qué?: Podrían ser muchas cosas, pero las más notables son:
Cómo diagnosticar (aislamiento): mida el tiempo que toma cada paso, podría ser una simple impresión de su tiempo actual. Lo rompería en los siguientes pasos:
NOTA: los pasos 2 y 3 podrían ir juntos.
Cómo mitigar que esto suceda (no resuelve el problema, pero lo mitiga):
Esto podría ser una posibilidad remota. "appendToWrapper" es un objeto pasado por referencia. Si tarda mucho tiempo en resolverse (es decir, tarda unos 10 segundos en encontrar ".game_play_area", etc. en el DOM), entonces sería lento la primera vez, pero se guardaría en la función de llamada y rápido en los tiempos subsiguientes.
Puede ser fácil de comprobar. Si pudiera hacer una copia profunda del objeto antes de pasarlo, esperaríamos que AJAX fuera lento cada vez, no solo la primera vez. Si ese es el caso, necesitaría limpiar sus selectores para hacerlos más rápidos. Quizás use ids en lugar de clases.