DOM 操作排队顺序

如何解决DOM 操作排队顺序

我在搜索中找不到答案，请帮助我理解为什么下面的代码会这样工作。

在常规条件下（我的问题所指的是，所以请查看此 codepen demo，因为如果您运行该代码段，由于某种原因，它会以另一个结果执行代码） console.log 两次都已显示操纵父元素，其中包含子元素。甚至在我定义/创建它之前！

主要问题：为什么它会这样工作？据我所知，该代码中的每个操作都是同步的，因此所有这些操作都应该按常规顺序调用，即使某些 Web正在使用 API。

第二个问题。如果您在演示中取消注释调试器行，它将像您在此处运行代码剪刀一样工作：第一个控制台日志显示未触及的父元素，第二个 - 显示已操作。这是一种更直观的方式来执行该代码。为什么启用调试会产生如此大的差异？

谢谢！

const parent = document.querySelector('.parent');

console.log(parent);

const child = document.createElement('div');
parent.appendChild(child);

console.log(parent);

<div class="parent">
</div>