针对高fps的多个浏览器显示优化JavaScript

本文介绍了针对高fps的多个浏览器显示优化JavaScript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个使用画布绘制快速显示的FFT.我想对代码进行优化，以使其以60 fps或接近60 fps的速度同时显示16个浏览器窗口.现在在我的机器上，它以5 fps的速度运行，同时显示16个窗口.

I have an FFT using canvas that plots a high speed display. I want to optimize the code to have 16 browser windows showing at the same time at 60 fps or close to it. Right now on my machine it runs at 5 fps with 16 windows showing simultaneously.

我想知道是否有更好的方法来优化代码以提高绘图性能.

I was wondering if there was a better way to optimize my code for drawing performance.

有了这个，我最多可以同时打开四个浏览器窗口，获得60 fps，但是此后fps明显下降.现在，我将所有文件加载到数组缓冲区中，并操作点并在drawFFT()中同时绘制它们.关于在同时运行的多个浏览器窗口上提高fps性能的任何技巧?

With this I am getting 60 fps for up to four simultaneous browser windows but fps drops significantly after that. Right now I am loading all the files into an array buffer and manipulating the points and drawing them at the same time in drawFFT(). Any tips on improving fps performance on multiple browser windows running at the same time?

在多个窗口上显示60 fps动画

99.99％的时间中，requestAnimationFrame 是制作视觉动画的方式.这是一个很棒的工具，它与屏幕刷新率同步，具有很高的计时精度，并且电池友好.

60 fps animation on multiple windows

99.99% of the time, requestAnimationFrame is the way to do visual animations. It's a great tool, synced with the screen refresh rate, with great timing precision, and battery friendly.

这最后一个优点是您的问题:为了节省电量，浏览器仅允许以60fps的速度对当前聚焦的窗口进行屏幕同步.所有其他窗口都以较低的帧速率延迟.
由于您要有多个窗口，因此只能集中一个窗口，因此只有一个窗口以60fps刷新，所有其他窗口的速度都将降低到5fps.

This last advantage is your problem : To save power, browsers do allow the screen synchronization only for the currently focused window at 60fps. All other windows are delayed, on a lower frame-rate.
Since you want to have multiple windows, you'll be able to get only one focused, and thus only one refreshing at 60fps, all others will be slowed down to about 5fps.

WebAudioAPI确实具有自己的低级和高精度时钟系统.
所谓低级"，是指该时钟系统不与主要的js-thread *绑定.在某些实现(镶边)上，所有WebAudioAPI甚至都在并行线程上运行.对于我们的案例更重要的是，该时钟系统不仅与聚焦窗口相关联.这确实意味着我们可以在后台窗口中以60fps的速度运行代码.

The WebAudioAPI does have its own low-level and high-precision clock system.
By "low-level", I mean that this clock system is not tied to the main js-thread*. On some implementations (chrome) all the WebAudioAPI even runs on a parallel thread. And more importantly to our case, this clock system is not only tied to focused window. This does mean that we can run code, in a background window, at 60fps.

这是基于WebAudioAPI时钟的定时循环的简单实现.

Here is a simple implementation of an timing loop based on the WebAudioAPI clock.

(* ).

/*
    An alternative timing loop, based on AudioContext's clock

    @arg callback : a callback function 
        with the audioContext's currentTime passed as unique argument
    @arg frequency : float in ms;
    @returns : a stop function

*/
function audioTimerLoop(callback, frequency) {

  var freq = frequency / 1000;      // AudioContext time parameters are in seconds
  var aCtx = new AudioContext();
  // Chrome needs our oscillator node to be attached to the destination
  // So we create a silent Gain Node
  var silence = aCtx.createGain();
  silence.gain.value = 0;
  silence.connect(aCtx.destination);

  onOSCend();

  var stopped = false;       // A flag to know when we'll stop the loop
  function onOSCend() {
    var osc = aCtx.createOscillator();
    osc.onended = onOSCend; // so we can loop
    osc.connect(silence);
    osc.start(0); // start it now
    osc.stop(aCtx.currentTime + freq); // stop it next frame
    callback(aCtx.currentTime); // one frame is done
    if (stopped) {  // user broke the loop
      osc.onended = function() {
        aCtx.close(); // clear the audioContext
        return;
      };
    }
  };
  // return a function to stop our loop
  return function() {
    stopped = true;
  };
}

然后这样称呼它:

var stop_anim = audioTimerLoop(yourCallback, 60); // runs 'yourCallback' every 60ms

并停止它:

stop_anim();

好的，现在我们甚至可以在模糊的窗口上运行平滑的动画.

All right, Now we are able to run smooth animation even on blurred windows.

不幸的是，创建AudioContext时，浏览器受硬件限制的约束. (例如，在我的计算机上，我不能同时运行6个以上的上下文.)

Unfortunately, browsers are tied to hardware limitations when creating AudioContext. (e.g. on my computer, I can not have more than 6 contexts running at the same time.)

这里的解决方案是在一个主窗口中运行所有代码.

在此主窗口中，您将首先

打开所有其他窗口，以便您可以访问其内容，
获取画布元素的上下文，
借鉴这些背景

这样，您在主窗口上只有一个更新线程，而其他所有窗口都只需要渲染即可.

This way, you've got a single update thread, on the main window, and all other windows only have to render.

(请确保允许弹出窗口并禁用广告拦截器).

(Be sure to allow popups and to disable your ad-blocker though).

这篇关于针对高fps的多个浏览器显示优化JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

FPS