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标记之前几秒钟，您会发现控制台中出现“已完成”。如果没有，请尝试将N增加几个数量级。

如何更改DOM，并检测不仅更改已完成但在屏幕上呈现的时刻？

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

中看到

Answer 1

我对此类操作几乎没有经验，但使用requestAnimationFrame进行5分钟的实验表明它可能对此类用例有用。

根据MDN：

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

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

我已经为你的小提琴添加了一个div（id = "loading"），这在最初是可见的。在将所有节点附加到DOM之后，我将回调传递给requestAnimationFrame，这将隐藏屏幕上的#loading div。

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

// Update DOM ...

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

您可以查看fiddle here。

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

1 个答案: