javascript - 第一个 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. 握手:您的页面与服务器之间的第一次交互使远程服务器对您进行身份验证并验证您的 session 。以后的调用不会经过该过程。
2. 服务器首次执行:(如果您使用的是公共(public) API，则可能性较小)例如，如果您使用带有 Java 的远程服务器，您正在重新启动，那么在您第一次调用服务时，它将加载实例，但对于 future 的调用，这些实例已经创建，因此它们响应更快。
3. 网络:(我不这么认为...但是...)跟踪您的 HTTP 请求以查看它有多少次跳转以及需要多少时间才能解决这些问题。

如何诊断(隔离):测量每一步花费的时间，它可以是您当前时间的简单打印。我会按照以下步骤打破它:

1. 准备调用 API。
2. 调用 API。
3. 获取数据。
4. 在客户端处理接收到的数据。

注意:第 2 步和第 3 步可以一起进行。

How to mitigate this from happening(它没有解决问题，但减轻了它):

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