Javascript 如何检测DOM更改何时实际呈现？

尝试在

窗口中运行以下代码。onLoad

：

var n = 0;
var N = 75000;
while (n < N)
{
    span = document.createElement("span");
    span.innerHTML = "0";
    document.body.appendChild(span);
    n++;
}
console.log("Finished.");

var n=0；
var N=75000；
而（n

您应该会发现，在span标记出现在浏览器中之前的几秒钟，“Finished”就会出现在控制台中。如果没有，请尝试将

N

增加几个数量级

---

我如何进行DOM更改，并检测到更改不仅完成，而且在屏幕上呈现的时刻？

---

我尝试了一个MutationObserver，但它也会在屏幕上显示更改前几秒钟收到通知。您可以在中看到。

我对此类操作几乎没有经验，但对

requestAnimationFrame

的5分钟实验表明，它可能对此类用例有用

根据：

window.requestAnimationFrame（）方法告诉浏览器您希望执行动画，并请求浏览器在下次重新绘制之前调用指定函数更新动画。该方法将回调作为重新绘制之前要调用的参数

所以我有一种预感，如果一个特定的渲染花费了太长的时间，那么传递到

requestAnimationFrame

的下一个回调调用就会延迟

---

我已经在您的小提琴上添加了一个div（

id=“load”

），它最初是可见的。将所有节点附加到DOM之后，我向

requestAnimationFrame

传递一个回调，该回调将隐藏

#从屏幕加载

div

var loading = document.getElementById("loading");

// Update DOM ...

requestAnimationFrame(function() {
    loading.style.display = "none";
});

---

您可以查看。

您可以等待下一个事件循环<代码>设置超时（函数（）{console.log（“done”）；}，1）“我如何进行DOM更改，并检测到更改不仅完成，而且在屏幕上呈现的时刻？”-这听起来像是一个问题。为什么这些信息对你有用？@Quentin My extension对DOM进行了大量更改，这在大页面/速度较慢的计算机上需要几秒钟的时间，我想要一个“旋转的轮子”进度指示器，它在呈现更改后即消失，而不仅仅是在代码中。你可以在最后一个元素上尝试transitionend事件，但我是@Quentin，你应该看看如何提高你的表现。如果渲染被阻止，你旋转的东西将不会旋转。我本以为对DOM所做的一系列更改（最后一个更改是移除旋转轮）会导致在其他更改之前移除旋转轮的渲染更新不会发生。当我运行该小提琴时，“动画完成”消息在跨度出现在屏幕上之前很久就出现了。@JackM它实际上出现在数字出现在屏幕上之前。可能是因为隐藏“加载”的回调应该与显示所有这些数字的渲染一起执行。实际上，您可以通过在中间添加另一个

requestAnimationFrame

来等待另一次重新绘制，但是在数字开始渲染时，您将开始看到“正在加载”文本。在这种情况下，“加载”将在数字完成渲染后隐藏。这样地：