2

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

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

这可能吗，怎么做？

4

3 回答 3

1

我认为在避免所谓的“故障”的标准意义上，您无法做任何事情。也许有软件可以以某种方式为您的文件提供服务，但即使这是可能的，那是多么的矫枉过正？！

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

如果您遇到故障问题，则可能与之后下载到页面的资产有关，实际上与 CSS 本身无关。

想想像图像、脚本甚至网络字体这样的资产。这些也需要加载。如果你的页面设计是依靠这些资产以某种方式实现布局，那么它当然会产生轻微的故障效果，因为它需要加载。

我认为几乎不可能计算 CSS 何时加载，因为这是在流程的“客户端”端完成的。您无法真正预期人们的浏览器和互联网速度到准备就绪时可以提供服务的程度。

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

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

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

于 2013-02-27T12:22:23.547 回答
1

一个老问题，但是当我试图弄清楚如何防止“页面闪烁”时发现它 - 在 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>
于 2021-01-06T04:41:43.450 回答
0

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

如果您已经这样做了，请查看开发人员工具（在 Chrome 中）的网络选项卡，看看网络是否延迟了您的 CSS 文件的交付。

于 2013-02-27T12:22:00.087 回答