Question

我很痛苦，我希望有人可以提供帮助！

我有一段非常慢的代码。我有40 variables，对于他们每个我做以下事情：

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倍！但为什么？我不是要获取更多数据吗？

编辑：我回去并在新的console.log(data)函数中做了get_data，令人惊讶的是它确实要求整个数据（URL）40次！然而这比做40个不同（URL？name = variable）

更快

Answer 1

您不再将该变量添加到URL，因此URL保持不变。我相信浏览器会在第一次请求后缓存响应，因此剩余的39个请求都是从缓存中提供的。

总而言之，您正在减少HTTP请求，这意味着建立连接所花费的时间更少。

＆＃34; best＆＃34;解决方案是只生成一个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);
      }); 
    }
  };
}());

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

1 个答案: