关于console.log是同步还是异步的问题

前言

最近在一次使用console.log()的过程中，发生了一件意料之外的事情，让我想起了多年前，一位面试官问我的一个问题
console.log()是同步的还是异步的？
当时我听到这个问题还有点懵

console.log是同步还是异步？

先说答案，console.log()其实是异步的

看一下下面代码

// 加载图片
const image = new Image()
image.src = '/src/images/11.png'
console.log(image)
image.onload = () => {
  canvasRef.current?.getContext('2d')?.drawImage(image, 0, 0, 300, 300);
}

image.src = '/src/images/avatar.png'

如果console.log()是同步执行，那么打印出来的结果，应该是src为/src/images/11.png的dom，
但实际，image的src显示为/src/images/avatar.png。
所以，由此得知，console.log()的执行是异步而非同步

为什么？

在【你不知道的JavaScript中卷】中有这样一段话

你不知道的JavaScript中卷

并没有什么规范或一组需求指定console.* 方法族如何工作——它们并不是JavaScript 正式
的一部分，而是由宿主环境（请参考本书的“类型和语法”部分）添加到JavaScript 中的。因此，不同的浏览器和JavaScript 环境可以按照自己的意愿来实现，有时候这会引起混淆。
尤其要提出的是，在某些条件下，某些浏览器的console.log(..) 并不会把传入的内容立即输出。出现这种情况的主要原因是，在许多程序（不只是JavaScript）中，I/O 是非常低速的阻塞部分。所以，（从页面/UI 的角度来说）浏览器在后台异步处理控制台I/O 能够提高性能，这时用户甚至可能根本意识不到其发生。