为什么第一次调用函数比 p5.js 中的后续调用花费更长的时间？

Question

我正在尝试测量绘制由瓷砖制成的板的性能。

一个选项是一个一个地绘制瓷砖，另一个选项是先将瓷砖填充到图像中，然后只绘制静态图像

绘制图像比一张一张地绘制图块要快得多。

但是我注意到，我第一次运行一个函数比接下来调用该函数花费的时间要多得多。

第一次通话时间长的原因是什么？

这是我的代码

let img;
let NROWS = 55;
let NCOLS = 29;
const TILE_WIDTH_HALF = 32;
const TILE_HEIGHT_HALF = 16;
const HALF_WIDTH = 950;
const HALF_HEIGHT = 450;
let start, end;
let bg;

function preload() {
  img = loadImage("tile.png");
}

// Populates the background graphics
function populateBackground() {
  bg = createGraphics(HALF_WIDTH*2, HALF_HEIGHT*2);
  for (let row=0; row<NROWS; row++) {
    for (let col=0; col<NCOLS; col++) {
      x = col*TILE_WIDTH_HALF*2 + (TILE_WIDTH_HALF * (row%2)+1)
      y = row*TILE_HEIGHT_HALF;
      bg.image(img, x, y);
    }
  }
}

// draws tile by tile into the canvas
function drawTileByTile() {
  background(100);  
  start = millis();
  for (let row=0; row<NROWS; row++) {
    for (let col=0; col<NCOLS; col++) {
      x = col*TILE_WIDTH_HALF*2 + (TILE_WIDTH_HALF * (row%2)+1) - HALF_WIDTH;
      y = row*TILE_HEIGHT_HALF - HALF_HEIGHT;
      image(img, x, y);
    }
  }
  end = millis();
  return (end-start);  
}

// draws the prepopulated graphics as a single image
function drawAsImage() {
  background(100);
  start = millis();
  image(bg,-HALF_WIDTH,-HALF_HEIGHT);
  end = millis();
  return (end-start);  
}

function setup() 
{
  createCanvas(HALF_WIDTH*2, HALF_HEIGHT*2, WEBGL);
  populateBackground();

  // Draw tile by tile 10 times
  let elapsed_ms = [];
  for (let n=0; n<10; n++) {
    elapsed_ms.push(drawTileByTile().toFixed(3));
  }
  console.log(elapsed_ms);
  
  // Draw as image 10 times
  elapsed_ms = [];
  for (let n=0; n<10; n++) {
    elapsed_ms.push(drawAsImage().toFixed(3));
  }
  console.log(elapsed_ms);

  noLoop();
}

function draw()
{
  
}

还有时间。如您所见，逐块绘制大约需要 35 毫秒，而绘制图像需要 0.1 毫秒（在这两种情况下都使用 WEBGL 和 GPU）

然而，我更感兴趣的是第一个电话比下一个电话多 4 到 10 倍。

sketch.js:61 (10) ['114.400', '35.400', '37.000', '31.800', '54.200', '51.900', '33.000', '34.400', '30.200', '31.200']
sketch.js:68 (10) ['1.000', '0.100', '0.100', '0.000', '0.100', '0.000', '0.000', '0.000', '0.000', '0.000']

这里有P5编辑器的链接，大家可以自己运行代码

https://editor.p5js.org/SembeiNorimaki/sketches/E13qBvAyn