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

Question

尝试在 window.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.");

您应该会发现，在 span 标记出现在您的浏览器中之前几秒，“Finished”出现在您的控制台中。如果不是，请尝试将 N 增加几个数量级。

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

我尝试了 MutationObserver，但它也在更改出现在屏幕上前几秒收到通知。您可以在 this fiddle 中看到.

Answer 1

我对此类操作经验不多，但对 requestAnimationFrame 进行了 5 分钟的实验表明它可能对此类用例有用。

根据 MDN :

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.

所以我有一种预感，如果一个特定的渲染时间太长，下一次调用传递给 requestAnimationFrame 的回调将会被延迟。

---

我已将一个 div (id = "loading") 添加到您的 fiddle 中，它最初是可见的。将所有节点附加到 DOM 后，我将回调传递给 requestAnimationFrame，这将从屏幕上隐藏 #loading div。

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

// Update DOM ...

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

你可以看看fiddle here .