p5.js画布在代码哪个位置创建？调用createCanvas()后画布延后显现是否正常？

观测到的实际现象 #

我借助createCanvas()方法创建p5.js画布，此前我一直确信，调用createCanvas()的时刻画布就会被绑定到DOM中。但实际开发中观测到的行为和认知存在偏差：页面上真正显示出画布的时机，看起来是在整个sketch.js文件执行到最后一行注释的位置，并非调用createCanvas()的瞬间。

对应存在疑问的代码片段如下：

//sketch.js

const gridSize = 100;

/**
 * Setup
 * @returns {void}
 */
function setup() {
  domObjects.canvas = createCanvas(windowWidth, windowHeight);
  resizeGrid();
}

/**
 * Makes the Grid
 * @returns {void}
 */
function makeGrid() {
  let cell = gridSize;

  for (let i = 0; i <= width; i++) {
    line(cell * i, 0, cell * i, height);
    line(0, cell * i, width, cell * i);
  }
}

/**
 * Mainfunction
 * @returns {void}
 */
function draw() {
  try {
    background(255);

    makeGrid();
    animateWorm();
  } catch (err) {
    console.log('Error: ' + err);
    noLoop();
  }
}
// the canvas appers at this point WTF

结论与原理解释 #

这种现象属于完全正常的框架行为，不存在逻辑异常，核心原因有两点：

• DOM渲染阻塞机制：浏览器的同步JS执行流程会完全阻塞页面渲染。哪怕在setup()里执行createCanvas()时，canvas节点已经被插入到了DOM树结构中，只要当前主线程的同步代码没有全部执行完毕，浏览器就不会触发重排、重绘操作把DOM变更显示到屏幕上。
• p5.js的全局模式加载逻辑：在默认的全局引入模式下，p5.js会等待页面所有关联JS脚本完成解析、全局作用域初始化完成后，才会依次触发setup()执行、启动draw()循环。你感知到的“画布出现在文件末尾”，本质是等整个脚本文件的所有顶层代码执行完，浏览器获得渲染权限后，才把早已插入DOM的canvas节点绘制出来的视觉错觉。

可以通过简单的验证确认：在setup()内执行完createCanvas()的下一行，直接查询DOM中的canvas元素，会发现该节点早已存在于文档结构中，只是屏幕尚未完成渲染而已。

内容的提问来源于stack exchange，提问作者TsgabiXD