是否有比 DOMContentLoaded 更快的事件可以设置为 addEventListener 的参数？那是什么？

Question

假设得到一个DOM作为参考节点，然后创建并插入一个DOM作为新节点。

如果我尽快创建并插入新节点，DOMContentLoaded 是上述情况下的最佳事件选项吗？

参考节点不是图像，它是 HTMLnknowElement，例如 HTMLDivElement、HTMLSpanElement。

这是一个示例代码流。

window.addEventListener("DOMContentLoaded", (event) => {
 // Below is an example code as pseudo code.

 // Get a reference DOM.
 const referenceEl = document.querySelector(".foo .reference-dom");
 // Create a new DOM.
 const newEl = document.createElement(htmlTag);
 // Insert the new DOM before reference DOM.
 referenceEl.parentElement.insertBefore(newEl, referenceEl.nextElementSibling)
})

如果我尽快执行代码，DOMContentLoaded 是上述情况下最好的事件选项吗？

Answer 1

如果您希望代码尽快运行，考虑到它所依赖的元素已经存在于 DOM，最简单的方法是将您的 <script> 标记就在脚本所需的最终元素下方运行。例如，对于 .reference-dom，您可以做

<div class="reference-dom">
  ...
</div>
<script>
const referenceEl = document.querySelector(".foo .reference-dom");
// or
const referenceEl = document.currentScript.previousElementSibling;

// ... etc

如果这不是一个选项，您可以使用的另一种方法是提前将子树 MutationObserver 添加到文档中（例如在 <body> 的开头，然后观看addedNodes 以查看您要查找的节点是否出现 - 但这样做代价高昂、矫枉过正，而且更难管理。

对于非常大的页面 (example)，等待 DOMContentLoaded 确实可能需要很长时间，在这种情况下，您正在做的事情会是个好主意 - 在该事件触发之前向应用程序添加基本功能，以确保良好的用户体验。（不过，如果您所做的只是向 HTML 添加另一个标签，更好的方法是使用模板引擎或其他东西 server-side 以便它服务于完整的 HTML本身，而不必稍后通过 JavaScript 更改它 client-side）

是否有比 DOMContentLoaded 更快的事件可以设置为 addEventListener 的参数？那是什么？

Are there any events faster than DOMContentLoaded that can be set as the argument of addEventListener? what is that?

javascript

dom

event-handling

addeventlistener

dom-events