首先ajax调用非常慢,后续调用很快 - 为什么？

Question

我正在使用一个简单的jQuery AJAX函数,它在第一次调用时运行速度非常慢(10-15秒),然后每次在第一次调用后运行正常<1 - 2秒.我无法弄清楚为什么会发生这种情况,但需要尽可能加快速度.这是功能:

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);
    }
});
}

我正在请求的API的一个例子是Giphy API.我不相信这是一个服务器问题,因为它只发生在第一次调用api然后后续调用很快.

任何想法为什么会发生这种情况以及可以采取哪些措施来加快运行速度？

Answer 1

考虑到整个问题Javascript(客户端)+ API(服务器端)可能会使诊断问题变得复杂,因此我建议获得更具体的答案是首先找出问题.

回答你的一般问题,原因是什么？:这可能是很多事情,但显着的是:

1. 握手:您的页面与服务器之间的第一次交互使远程服务器对您进行身份验证并验证您的会话.以后的电话不会经历这个过程.
2. 服务器首次执行:(如果您使用的是公共API的可能性较小)如果您正在使用带有Java的远程服务器,那么您正在重新启动,第一次调用服务时它将加载实例,但是为了将来调用这些实例已经创建,因此他们反应更快.
3. 网络:(我不这么认为......但是......)跟踪你的HTTP请求,看看它有多少跳转以及需要多少才能解决它们.

如何诊断(隔离):测量每个步骤的时间,它可以是您当前时间的简单打印.我会在以下步骤中打破它:

1. 准备调用API.
2. 调用API.
3. 获取数据.
4. 在客户端操作接收的数据.

注意:步骤2和3可以一起使用.

如何缓解这种情况发生(它不能解决问题,但可以减轻问题):

1. 握手:如果问题与身份验证/授权有关,我建议您执行空预取(不请求任何数据)来处理握手.然后在需要时进行数据提取而不会产生这种开销.
2. 服务器首次执行:除非您拥有服务器,否则此处没有太多事情要做.在这种情况下,我还建议预取,但调用整个服务来初始化服务器对象.
3. Javascript API:如果问题是处理客户端上的数据,那么请查看如何优化您的Javascript代码.