如何在DOM树渲染完成后正确执行指定代码？

你遇到的现象本质是JS代码执行时机早于canvas元素完成DOM解析的时机，直接执行获取元素的代码时，对应节点还没被挂载到DOM树中，所以返回空集合。setTimeout(..., 0) 是将代码推入宏任务队列，等待当前同步任务（包括DOM解析）执行完成后再触发，所以能正常获取元素，但这是不可靠的兼容写法，不推荐在生产环境使用。

推荐的规范实现方案有以下几种：

• 将JS脚本放到body标签的最末尾，所有DOM元素的定义之后
  浏览器会按顺序解析HTML内容，当执行到末尾的script标签时，前面所有DOM节点已经完成解析，可以直接获取到canvas元素，不需要额外的监听逻辑。
• 监听DOMContentLoaded事件
  该事件会在浏览器完成初始HTML解析、构建完完整DOM树后触发，不需要等待图片、样式表等外部资源加载完成，刚好匹配DOM操作的时机需求，示例代码如下：

  document.addEventListener('DOMContentLoaded', function () {
    const canvases = document.getElementsByTagName('canvas');
    // 在这里执行和canvas相关的后续逻辑
  });
  

• 框架场景下使用对应生命周期钩子
  如果是在Vue、React等框架中开发，直接使用框架提供的DOM挂载完成的生命周期钩子即可：比如Vue3的onMounted、React的空依赖useEffect回调。

不推荐setTimeout方案的原因：执行时机不可靠，若DOM解析耗时超出预期仍会出现获取不到元素的问题，同时会额外增加不必要的事件循环调度开销，还可能和其他异步任务产生执行顺序冲突，导致不可预期的异常。

内容的提问来源于stack exchange，提问作者原裕貴