如何暂停浏览器渲染，直到计算出css？

Question

我想强制浏览器在渲染页面之前等待，直到计算完所有css。

我的目标是避免在呈现纯html和呈现css之间出现“视觉毛刺”(提到here)。我的目标也是简单地了解是否以及如何在浏览器上获得这种级别的控制。

这是可能的吗?如何实现？

Answer 1

我不认为在标准意义上你可以做任何事情来避免你所说的“小故障”。也许有一些软件可以以某种方式为你的文件提供服务，但即使这是可能的，那又有多过分呢？！

现在大多数浏览器加载HTML和CSS的速度如此之快，你甚至都不会注意到它。

如果你遇到了小问题，这可能与之后下载到页面的资源有关，而不是CSS本身。

想想像图像、脚本甚至网页字体这样的资产。这些也需要加载。如果您的页面设计依赖于这些资源来以某种方式实现布局，那么它当然会有一个轻微的毛刺效果，因为它需要加载。

我认为要计算CSS何时加载几乎是不可能的，因为这是在进程的“客户端”完成的。你不能真的预测人们的浏览器和互联网的速度，以至于你准备好了就会提供服务。

如果你遇到字体渲染(跳转)小故障，请看这篇文章：http://paulirish.com/2009/fighting-the-font-face-fout/

如果与此无关，我强烈建议您重新思考页面是如何组合在一起的。

希望这能在某种程度上有所帮助。

Answer 2

这是一个老问题，但当我试图弄清楚如何防止“页面闪烁”时，我发现了这个问题--在CSS“启动”之前，你会看到没有充分应用CSS的HTML内容。

这里提到了几种技术，https://www.sitepoint.com/critical-rendering-path-css-fast-loading-website/。这段代码对我有效地防止了这种“闪烁”：

<link rel="preload" href="mystylesheet.css" as="style" onload="this.rel='stylesheet'">
<!-- for browsers without JavaScript enabled -->
<noscript><link rel="stylesheet" href="mystylesheet.css">
</noscript>

Answer 3

最好的建议是在页面的头部加载CSS文件，并在关闭正文之前加载JS。

如果你已经这样做了，那么看看开发者工具的网络标签页(在Chrome中)，看看网络是否延迟了你的CSS文件的传输。