问题标签 [render-blocking]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 避免在 javascript 注入的 css 中出现无样式的内容
我在一个简单的静态页面中有以下 JavaScript <head>，它指定a.css或b.css作为样式表使用，具体取决于一些附加 JavaScript 的结果（useA()此处未显示）。
当我在 Firefox 和 Chrome 上加载或刷新页面时，这会导致出现无样式内容 (FOUC)。
使用普通<link rel="stylesheet" ...>的没有这个问题：<head>使用<link>中加载的 CSS 显然是render-blocking。有没有办法让 CSS 注入的样式表也有相同的行为？
约束：
我不能改变a.css，b.css所以我不是在寻找一种解决方案，它涉及加载两个样式表或一个组合样式集，并在根元素上设置一个指示器类以影响工作表之间的选择。我也不是在寻找延迟任何显示直到页面完全加载的技巧visibility:hidden。display:none
wordpress - 如何解决 WordPress 中消除渲染阻塞后产生的布局移位问题（CLS）？
我们使用 Astra 主题和海狸页面构建器插件在 WordPress 中开发了我们的网站。为了提高网站得分，我们使用了 WP-Rocket 插件进行优化。现在 WP-Rocket 正在优化 CSS 和 JavaScript 并最终加载 CSS 和 JS 文件。因此，由于海狸页面构建器样式（布局 CSS）加载较晚，并且在页面速度洞察力中产生了 CLS 问题。有什么方法可以在第一次加载时加载这些布局 CSS 文件。
注意：对于每个页面，这些布局 CSS 文件由海狸页面构建器自动生成。
css - 使用 SCSS 和 Webpack 的大型样式表的最佳实践
我目前正在使用大型 main.css 改进我们的公司网站优化。
我当前的 SCSS 设置是使用 Webpack 处理编译的-7-1-模式，最终的main.css 在 Minification后为 286.2KB。
这会减慢移动网站的速度，并使我们在移动设备上的 PageSpeed Insights 得分很差，为 56（桌面 97）
影响我们在移动设备上得分的最大因素是消除main.css上的渲染阻塞资源。
我有一些仅在某些页面上使用的 SCSS 部分，但所有部分都在 main.scss 中@imported依次全部在main.css
问题
这里的最佳做法是什么，将@imports 拆分为超过 1 个 .scss 文件，依次有多个 .css 文件，并且只调用被请求页面上需要的 .css 文件，或者有更好的处理方法吗？