如果我将一些元素插入 DOM 树
document.getElementById("settings-details-form").innerHTML = "<h2 id=\"ddd\">hello</h2>";
在 DOM 用新元素更新之前，下一行 JS 代码会被执行吗？
进行 DOM 更新时 JavaScript 执行模型是什么？
最佳答案
当执行下一行时
- DOM 已更新，例如，您可以查询您添加的元素的尺寸
- 窗口尚未渲染，这意味着您不必担心用户看到不完整的状态:窗口将在代码结束时渲染
请注意，大多数浏览器都会进行优化:例如，如果您不查询尺寸，则在需要时才会计算尺寸(最终用于窗口渲染)。这就是为什么当您不在中间查询 DOM 布局时进行大量 DOM 更改会更快，这样回流仅计算一次(请参阅 Mozilla notes on HTML Reflow )。确切的流程高度依赖于浏览器引擎，但从功能上讲，无论浏览器是什么，下一行代码都会看到更新的 DOM。
关于创建 DOM 节点的 Javascript 流程，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20698570/