创建 DOM 节点的 Javascript 流程

Question

如果我向 DOM 树中插入一些元素

document.getElementById("settings-details-form").innerHTML = "<h2 id=\"ddd\">hello</h2>"; 

是否会在 DOM 使用新元素更新之前执行下一行 JS 代码？

DOM 更新时的 JavaScript 执行模型是什么？

Answer 1

下一行执行时

• DOM 已更新，例如，您可以查询您添加的元素的尺寸
• 窗口尚未呈现，这意味着您不必担心用户会看到不完整的状态:当您的代码结束时，窗口将呈现

请注意，大多数浏览器都会进行优化:例如，如果您不查询尺寸，则只有在需要它们(最终用于窗口渲染)时才会计算它们。这就是为什么当您不在中间查询 DOM 布局时进行大量 DOM 更改会更快，以便仅计算一次回流(请参阅 Mozilla notes on HTML Reflow )。确切的流程高度依赖于浏览器引擎，但在功能上，无论使用何种浏览器，下一行代码都会看到更新的 DOM。