检测所有 CSS 规则何时被应用和绘制

Question

在呈现网页的过程中，从加载样式表到应用该样式表中的所有规则并完成绘制之间存在延迟。

此延迟取决于样式表的大小和规则的复杂性。

是否有可靠的方法来检查绘画过程何时完成？

注意：我正在寻找一种在动态应用 CSS 规则时也能工作的方法，即当新样式表添加到页面或样式被 JavaScript 修改时。所以document.onload 不是这里的选项。

上下文：我正在开发一个大型单页应用程序，它可以动态加载样式表。为了避免出现flash of unstyled content，我正在展示一个微调器，我需要确切知道何时隐藏它。

Answer 1

我想说最可靠的解决方案是在 css 加载事件之后添加一个小延迟。

类似这样的伪代码：

myCssTag.onload(function(){
    setTimeout(doStuffAfterRender, 100);
});