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

Question

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

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

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

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

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

Answer 1

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

像这样的伪代码：

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

Detect when all CSS rules have been applied and painted