매개 변수가 requestAnimationFrame에 종속됩니까? - slowness

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"/ a lapse/"end render - animloop"블록이 인쇄되어 있습니다. 이 경과 시간을 이해하지 못합니다 ...

단계별로 디버거를 사용하려고하면 "소수 데이터"와 "큰 데이터"의 차이점을 볼 수 없습니다.

누군가 내 코드에 문제가 있거나 문제의 원인을 알고있는 경우 매우 감사 할 것입니다.

PS : 이제 속도가 향상되었습니다. 500fps는 500fps, 15fps는 7,000fps, 5fps는 20,000 (60fps는 필요하지 않지만 5는 충분하지 않습니다.)입니다.

Answer 1

애니메이션의 프레임 속도가 디스플레이의 프레임 속도와 같지 않거나 허용 가능한 성능을 제공 할 필요가없는 경우 시간에 따라 일부 프레임 건너 뛰기 (각 프레임에서 시간이 많이 걸리는 계산 수행을 방지하기 위해)를 고려하십시오. DOMHighResTimeStamp 형식의 requestAnimationFrame() 콜백으로 전달되었습니다.