d3.json（）：获取40（URL？name=variable）比获取40（URL）快

我很痛苦，我希望有人能帮助我

我有一段代码非常慢。我有40个

变量

，对于每个变量，我执行以下操作：

for (i=variables.length; i--;) {
  metric = URL?name=variable;
  d3.select( ... get_data(metric)).... // calls to visualize the data 
}

function get_data(metric) { 
  d3.json(metric, function(data) {
     // do stuff 
  }); 
}

为了加快速度，我采取了以下措施：

for (i=variables.length; i--;) {
  metric = URL;
  d3.select( ... get_data(metric,variable)).... // calls to visualize the data
} 

function get_data(metric,variable) { 
  d3.json(metric, function(data) {
    parse(data, variable) // extract variable related data
    // do stuff 
  }); 
}

新代码至少快6倍！但是为什么呢？我不是正在获取更多数据吗

---

编辑：我回去在新的

get_data

函数中做了一个

console.log（data）

，令人惊讶的是，它确实请求了整个数据（URL）40次！！但这比使用40种不同的方法（URL？name=variable）要快得多。

您不再向URL添加变量，因此URL保持不变。我相信浏览器会在第一个请求之后缓存响应，因此剩余的39个请求将从缓存中得到服务

因此，毕竟，您发出的HTTP请求更少，这意味着在建立连接上花费的时间更少

“最佳”解决方案是总共只发出一个Ajax请求：

var get_data = (function() {
  var cache = {};

  function doStuff(data, variable) {
    parse(data, variable);
    // do stuff
  }

  return function(metric, variable) {
    if (cache[metric]) {
      doStuff(cache[metric], variable);
    }
    else {
      d3.json(metric, function(data) {
        cache[metric] = data;
        doStuff(data, variable);
      }); 
    }
  };
}());

---

因为您发出的HTTP请求更少。建立连接需要时间。你建立的联系越多，你为建立联系“浪费”的时间就越多。但我提出的请求不是同样多吗？哦，我明白了。这并不是说您只进行了一次调用，而是您不再向URL添加变量。那么你加载了40倍的完整数据？在这种情况下，我相信浏览器会在第一个请求之后缓存响应，因此剩余的39个请求会从缓存中得到服务（因为URL不会更改）。毕竟，您的请求减少了。好吧，这就是我要找的，所以它会缓存结果！现在我的问题是，我是否应该创建一个局部变量来保存数据？也将您的答案放在“答案”中以接受我在浏览器中禁用了缓存，但它仍然很快。。。。重新启动了所有程序，但仍然很快嗯，这很奇怪。也许提取数据的服务器端逻辑非常慢？了解浏览器、web以及所有代码背后的工作原理有什么好的参考吗？“浏览器在第一个请求后缓存响应”这是如何工作的？当它第二次看到d3.json时，它指的是缓存的响应？