CSS 是如何正确预加载的？答案

【问题标题】：How is CSS meant to be preloaded correctly?CSS 是如何正确预加载的？
【发布时间】：2023-02-21 17:10:11
【问题描述】：

为了消除 CSS 的渲染阻塞效应，我尝试使用 web.dev 中显示的格式预加载我的 CSS 文档。

我已将其包含在我的 HTML 中，如下所示 - 据我了解，此处只允许使用某些 HTML 标签，因此我内联了一个图像文件。如有必要，我可以修改它以遵循最佳实践。

我不太明白我是否正确地实现了这个预加载，因为性能分数在 59 到 85 之间的任何地方都有很大差异。

据我了解，我需要先预加载 CSS 文件，然后内联该页面的关键 CSS，然后自己调用 CSS 文件。但我担心我可能误解了它是如何工作的，因为包括这两个 CSS 文件的预加载功能似乎对性能分数有相当一致的不利影响？

【问题讨论】：

如果您指定预加载样式表，然后几乎立即请求加载相同的样式表，您预计预加载对页面加载时间的影响有多大？基本上和根本不指定预加载是一样的。

标签： css preload core-web-vitals

【解决方案1】：

您没有链接到您所指的网页和部分，但我假设它是这样的：https://web.dev/preload-critical-assets/#preloading-css-files，其中指出：

如果你使用critical CSS approach，你将你的 CSS 分成两部分。呈现首屏内容所需的关键 CSS 内联在文档的 <head> 中，并且非关键 CSS 通常使用 JavaScript 延迟加载.在加载非关键 CSS 之前等待 JavaScript 执行可能会导致用户滚动时呈现延迟，因此最好使用 <link rel="preload"> 尽快启动下载。

所以是的，你误解了它。请参阅我大胆引用的部分。

你在哪里用 JavaScript 延迟加载你的非关键 CSS？据我所知，你不是。您指定预加载样式表，然后几乎立即请求加载相同的样式表。您希望预加载对页面加载时间有多大的影响？基本上和根本不指定预加载是一样的。

要延迟加载它，请在事件侦听器函数的主体中为您希望延迟加载触发的事件使用类似这样的内容：
const stylesheetEl = document.createElement("link");
stylesheetEl.rel = "stylesheet";
stylesheetEl.href = ""; // TODO
document.head.appendChild(stylesheetEl);

【讨论】：