javascript - 仅当客户端浏览器开始卡顿时，是否可以在 highcharts 中打开升压模式？

Question

我有一个带有动画的动态更新图表，在某些情况下，在较弱的机器上可能会产生卡顿。我想使用增强模式，但我不想放弃大多数客户端上的动画。有什么方法可以确定卡顿或客户端处理器时间不足的位置。一旦 Highcharts 获得此状态 -> 增强模式就会启用。

Answer 1

您可以将 jenk 定义为丢帧。假设您希望每秒至少制作 25 帧的动画，任何低于该帧的内容都会发生丢帧。

如果丢失 100 帧，则放弃 Highcharts 动画，但如果 200 帧就可以，则将丢失帧重置为 0。

您可以调整什么是太多 jenk 并放弃的规则，但下面的规则描述了以下代码中的规则:

const frameDetector = (
  (minFPS,alertWhen)=>{
    var callBacks = [];
    var dropped = 0;
    var passed = 0;
    const detect = last => {
      if((Date.now()-last)>(1000/minFPS)){
        console.log("dropped frame");
        dropped++;
      }else{
        passed++;
      }
      if(dropped>alertWhen){
        callBacks.forEach(callback=>callback());
        return;
      }
      if(passed>(2*alertWhen)){
        //doing well, didn't drop frames for a while so reset dropped
        console.log("Doing well, reset dropped");
        dropped = 0;
        passed=0;
      }
      last = Date.now();
      requestAnimationFrame(()=>detect(last));
    }
    detect(Date.now());
    return {
      addListener:x=>callBacks.push(x),
      removeListener:x=>callBacks=callBacks.filter(cb=>cb!==x)
    }
  }
)(25,100);//minimum 25 frames per second, maximum 100 dropped frames

//handler function to handle when browser start dropping too many frames
const whenToManyFramesAreDropped = ()=>{
  //turn off boost:
  //https://api.highcharts.com/highcharts/boost.enabled
  console.log("Dropping too many frames, go to power mode");
};
frameDetector.addListener(whenToManyFramesAreDropped);