Question

由于我的数据量，我尝试以最小的数量显示它们几次，这要归功于requestAnimationFrame。我是这个方法的新手，并且遇到了一些问题。

适用于小型数据库，少于1000个条目，这是顺利的。但是，当我尝试使用更大的数据库时，循环不再平滑。我不明白这种缓慢，因为无论“数据”的大小如何，通常渲染都会做同样的事情。

function paths(data, ctx, count) {
    var n = data.length,
        i = 0,
        reset = false;
var lastRun=0;
var fps;
function render() {
  var max = d3.min([i+60, n]);
  data.slice(i,max).forEach(function(d) {
      d3.select(".foreground")
              .append("path")
              .attr("d", function(p){ return path(d);
             })
              .attr("stroke", "steelblue");
  });
    i = max;
console.log("end render");
};

(function animloop(){
console.log("animloop");
  if (i >= n || count < brush_count) return;
    lastRun = new Date().getTime();
    requestAnimationFrame(animloop);
    render();
  })();
};


// Returns the path for a given data point.
function path(d) {
  return line(dimensions.map(function(p) {
   return [position(p), y[p](d[p])]; }));
}

我试着看看缓慢来自哪里，多亏了console.log（），但实际上是在渲染之后。在控制台上印有“end render - animloop”/失效/“end render - animloop”的块。我不明白这种失误......

当我尝试逐步使用调试器时，我看不出“少量数据”和“大数据”之间存在任何差异。

如果有人在我的代码中发现问题或知道问题的根源，我将非常感激。

PS：速度现在：500个条目50fps，7,000个15fps，20,000个5fps（我不需要60fps但是5个还不够）。

Answer 1

如果您不需要动画的帧速率等于显示器的帧速率（或者不能提供可接受的性能），那么请考虑根据传递的时间跳过一些帧（以防止在每帧执行耗时的计算） requestAnimationFrame()格式的DOMHighResTimeStamp回调。

哪些参数依赖于requestAnimationFrame？ - 慢

1 个答案: