小编Ser*_*nos的帖子

我正在渲染一个单元格网格,非常类似于填字游戏中的网格,但使用四种不同的颜色来填充每个单元格(不仅是黑色或白色).

网格大小约为160x120,我需要尽可能快地渲染它,因为它将用于显示细胞自动机动画.

我尝试了两种不同的方法来渲染网格:

• 使用以下内容渲染每个单元格:

  var w = x + step;
  var h = y + step;
  canvasContext.fillStyle=cell.color;
  canvasContext.fillRect(x+1,y+1,w-1,h-1);
  canvasContext.strokeRect(x,y,w,h);
  

  Run Code Online (Sandbox Code Playgroud)

• 渲染没有边框的所有单元格,然后使用以下方法渲染网格线:

  var XSteps = Math.floor(width/step);
  canvasContext.fillStyle = gridColor;
  for (var i = 0, len=XSteps; i<len; i++) {
      canvasContext.fillRect(i*step, 0, 1, height);
  }
  //Similar thing for Y coord
  

  Run Code Online (Sandbox Code Playgroud)

两种算法都表现不佳:在两种情况下绘制网格都比单元格慢.我错过了什么吗？我该如何优化这些算法？还有其他方法我应该尝试吗？

注意:网格会移动,因为用户可以移动它或缩放视图.

一般的问题是:在元素上绘制单元格网格的最快算法是什么？

使用最新的JSDOM（11.6.0），当与Sinon的伪计时器一起使用时，我遇到了一个无限循环。

const sinon = require('sinon');

sinon.useFakeTimers();
require('jsdom'); // This line creates an infinite loop

如何避免这种无限循环？