JavaScript操作DOM后如何确认对应变更的渲染流程已全部完成？

问题1：是否有其他文档属性能准确反映DOM是否已完成全部渲染？ #

不存在这类通用文档属性。document.readyState仅跟踪页面初始加载的流程状态，只会在初始HTML解析、所有同步资源加载完成后更新为complete，后续所有动态DOM操作都不会修改该值，自然无法用来判断动态插入元素的渲染状态。目前浏览器没有提供全局的文档属性来跟踪动态DOM变更后的渲染进度。 #

问题2：比MutationObserver更针对性的回调机制 #

针对单元素插入后的渲染完成监听，有两个更轻量化、更适配场景的方案可选：

• 方案1：双requestAnimationFrame回调 #

  无额外监听的极简方案，原理是浏览器的requestAnimationFrame回调会在每帧渲染前执行，连续两层嵌套调用可以确保跳过当前帧的JS执行阶段，等待插入元素的完整渲染流水线执行完成后触发。
  示例代码：

  ElementInMyDOM.appendChild(LargeHTMLElement);
  requestAnimationFrame(() => {
    // 第一层回调：当前帧渲染前，DOM已插入但未完成渲染
    requestAnimationFrame(() => {
      // 第二层回调：上一帧渲染已完成，目标元素已完成渲染
      console.log('元素渲染完成');
    });
  });
  

  优势：无需注册任何监听实例，性能损耗几乎为0，代码量极小；劣势：如果插入元素内部包含异步加载的资源（图片、字体等），回调可能提前触发，仅适用于插入内容为纯静态HTML、无外部依赖的场景。

• 方案2：ResizeObserver监听目标元素 #

  比MutationObserver更轻量化的针对性监听方案，它仅跟踪目标元素的尺寸变化，元素完成布局（渲染的核心前置步骤）时就会触发回调，完全适配单元素插入的场景。
  示例代码：

  ElementInMyDOM.appendChild(LargeHTMLElement);
  const observer = new ResizeObserver((entries) => {
    for (const entry of entries) {
      if (entry.target === LargeHTMLElement) {
        console.log('元素渲染完成');
        observer.disconnect(); // 触发后立即销毁监听，无额外性能残留
      }
    }
  });
  observer.observe(LargeHTMLElement);
  

  优势：仅监听目标元素的渲染相关变更，性能消耗远低于通用的MutationObserver，触发时机比双requestAnimationFrame更准确，适配包含内联样式、动态计算布局的元素场景。

补充说明：如果插入的元素内部包含异步加载的资源，需要叠加对应资源的load事件监听，才能确保资源加载完成后的完整渲染触发回调。

内容的提问来源于stack exchange，提问作者Bernd Wechner