Javascript流程创建DOM节点

Question

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

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

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

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

Answer 1

执行下一行时

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

请注意，大多数浏览器都会进行优化：例如，如果不查询维度，则在需要之前不会计算它们（最终用于窗口渲染）。这就是为什么当你不在中间查询DOM布局时，做一堆DOM更改会更快，这样只能计算一次reflow（参见Mozilla notes on HTML Reflow）。确切的流程依赖于浏览器引擎，但在功能上，无论浏览器如何，下一行代码都会看到更新的DOM。