javascript - 只有当客户端的浏览器开始卡顿时，是否可以在 highcharts 中打开 boost 模式？

Question

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

Answer 1

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

如果 100 帧被丢弃，则放弃动画高图表，但如果 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);