如何最大化异步调度器的性能？

Question

我注意到 JavaScript 中有一种奇怪的技术，我用它来提高在画布上绘制的重复过程的性能。将来，我计划在实现时使用SharedBufffer 甚至SharedCanvas，但与此同时，这是我使用的总体思路：

function someContinuousProcess(intervals, delay) {
  var count = 0;
  var span = document.querySelector('span');

  function someExpensiveFunction() {
    if (count >= 1e9) {
      return false;
    }

    do {
      count++;
    } while (count % 1e5);

    span.textContent = count;
    
    return true;
  }
  
  function wrapper(index) {
    var start = performance.now();
    
    if (someExpensiveFunction()) {
      var delta = performance.now() - start;
      // some logic here to determine new 
      // values for `intervals` and `delay`
      scheduler[index] = setTimeout(
        wrapper.bind(null, index),
        delay
      );
    }
  }

  var scheduler = [];

  function startScheduler() {
    for (var i = 0; i < intervals; i++) {
      scheduler[i] = setTimeout(
        wrapper.bind(null, i),
        delay
      );
    }
  }

  function stopScheduler() {
    for (var i = 0; i < scheduler.length; i++) {
      clearTimeout(scheduler[i]);
    }

    scheduler = [];
  }

  startScheduler();
}

int.onchange = del.onchange = () => {
  var intervals = parseInt(int.value);
  var delay     = parseInt(del.value);

  if (!isNaN(intervals) && !isNaN(delay)) {
    someContinuousProcess(intervals, delay);
  }
};

<input placeholder=intervals id=int>
<input placeholder=delay id=del>
<span></span>

如果你弄乱了参数，你会发现delay 和intervals 当然都会对性能产生显着影响。但在一定程度上，如果你设置过多的intervals 以达到一定的延迟，性能提升会变成性能下降，同时导致线程无响应。

我的问题是，是否可以根据给定的someExpensiveFunction 自适应地选择intervals 和delay？假设我们可以让someExpensiveFunction() 返回一个高分辨率时间戳performance.now()，那么我们如何使用它来智能地改变intervals 和delay 以优化性能？

Answer 1

这似乎是使用网络工作者的绝佳机会。它们在单独的线程中执行，因此不会影响主线程上的动画。

但是，仍然要求您不要太频繁地postMessage，否则主线程中的事件循环会因消息数量过多而窒息。

function simple() {
  var span = $('#v1');
  var worker = new Worker('data:text/javascript;charset=UTF-8,' + encodeURI($('#someExpensiveFunction').text()));

  worker.onmessage = progress => span.text(progress.data);
  worker.onerror = x => {
debugger;
  };
}

function withanim() {
  var span = $('#v2');
  var worker = new Worker('data:text/javascript;charset=UTF-8,' + encodeURI($('#someExpensiveFunction').text()));

  var latestMessage = 0;
  worker.onmessage = progress => latestMessage = progress.data;
  worker.onerror = x => {
debugger;
  };

  var myReq;
  function step(timestamp) {
span.text(latestMessage);
if (latestMessage < 1e9)
  myReq = requestAnimationFrame(step);
  }
  myReq = requestAnimationFrame(step);
}

simple();
withanim();

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" 
type="text/javascript" charset="utf-8"></script>
<div id=v1></div>
<div id=v2></div>
<script type="text/worker" id="someExpensiveFunction">
var count = 0;
var start = performance.now();
var reportPerSec = 100; //change this
var delay = 1000/reportPerSec;
do {
  //some un-interrupable task
  //it might be useful to put this in a setTimeout(0), if you also want to use onmessage to get data to work on from the main thread
do {
count++;
  } while (count % 1e2);
  
  //report progress
  if (performance.now() - start > delay) {
 	postMessage(count);
start = performance.now();
  }
} while (count < 1e9);
postMessage(count); //make sure to send 'done'
</script>

Fiddle