Question

我想强制浏览器等到所有css都被计算出来然后再渲染页面。

我的目标是避免在渲染的纯HTML和渲染的CSS之间出现“视觉故障”效应（提到here）。我的目标也是简单地了解我是否以及如何在浏览器上获得这种级别的控制。

这可能，以及如何？

Answer 1

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

现在大多数浏览器都会加载HTML和CSS，所以你甚至都不会注意到它。

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

考虑图像，脚本甚至Web字体等资源。这些也需要加载。如果您的页面设计依赖于这些资产以某种方式实现布局，那么它当然会产生轻微的毛刺效应，因为它需要加载。

我认为在加载CSS时几乎不可能计算，因为这是在流程的“客户端”完成的。你无法真正预见到人们的浏览器和网络速度，以至于你准备就绪时就会服务它。

如果您遇到字体渲染（跳跃）故障，请查看以下文章： http://paulirish.com/2009/fighting-the-font-face-fout/

如果与此无关，我强烈建议您重新考虑如何将您的网页放在一起。

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

Answer 2

最好的建议是将CSS文件加载到页面的头部，然后在结束主体之前加载JS。

如果您已经这样做了，请查看开发者工具的网络标签（在Chrome中），看看网络是否推迟了CSS文件的传送。

Answer 3

一个老问题，但在我试图弄清楚如何防止“页面闪烁”时发现了它 - 在 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>

如何计算css之前暂停浏览器渲染？

3 个答案: