javascript - 为什么自定义字体会减慢我的程序速度？

Question

所以我正在 p5.js 中制作一个项目，旨在重现 Matrix rain 代码效果。它运行得非常顺利，直到我决定加载自定义字体。当我这样做时，我的帧率大幅下降。我尝试加载的每个自定义字体都是这种情况(仅当我使用 loadFont 函数时；如果我使用 textFont 和某些默认字体，它似乎不会减慢速度)

当然，我在预加载函数中使用了loadFont函数，在设置中使用了textFont函数，所以我不知道这是不是已知的事情？我怎样才能避免这种情况？

这是问题的最小可行示例:

var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789$+-*/÷=%\"'#&_(),.;:?!\\|{}<>[]^~ "
var font;

var spacing_width = 10;
var spacing_height = 20;

function preload() {
    font = loadFont('matrix_font.otf');
}

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  frameRate(60);
  background(0);

  textFont(font);
  fill(255)
}

var lastUpdate;

function draw() 
{
  background(0);

  var timeSinceLastUpdate = new Date().getTime() - lastUpdate;
  print(timeSinceLastUpdate + "ms") // prints time elapsed between each frame
  lastUpdate = new Date().getTime();

  for(var i = 0; i < 40; i++)
    for(var j = 0; j < 40; j++)
      text(characters[int(random(0, characters.length))], j * spacing_width, i * spacing_height)
}

此代码在控制台中打印大约 40-50 毫秒的值，但是当我注释掉 textFont(font); 行时该值约为 10-20ms

我正在使用 this font，但我尝试加载的每种字体都有问题

Answer 1

参见https://github.com/processing/p5.js/issues/3435讨论这个问题