问题标签 [fouc]
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.
webpack - Webpack5 + MiniCssExtractPlugin + html-webpack-plugin 不在 index.html 上添加链接标签
我尝试使用 Webpack5 + MiniCssExtractPlugin + html-webpack-plugin 和其他插件在生产环境中构建，但我无法在 index.html 中包含 css 标签。
每次 css 文件都由 javascript 附加“无样式内容的闪存”（FOUC）问题。
我通过这个简单的命令使用npm run build ：webpack --config webpack.prod.js
webpack.prod.js
webpack.config.js
这是 index.html 结果：
在构建文件夹中，我有一个 *.js 和 *.css 文件列表，其中包含哈希和资产文件夹及其内容。
谢谢你的帮助
next.js - NextJS 中的 FOUC 使用 Tailwind Css
我正在使用 NextJS 和 TailwindCSS 开发的网站的生产页面上有一个 FOUC。它在不同浏览器中存在不同程度，但在桌面 Firefox 上似乎最糟糕。你可以在这里查看：布雷顿做指甲
根据我的发现，我可以通过配置_document.js文件来修复它，但我不确定如何设置它以专门与 Tailwind 一起使用。
是否有人对如何解决此问题或我可以查看以了解如何尝试自定义文档的资源有任何建议？
css - css 样式应用延迟 1 秒（样式组件？）
我目前正在使用 React 和 docusaurus 的帮助构建我的第一个网站/文档。但是，一旦我重新加载站点，大约 0.5 - 1 秒的 css 样式就没有正确应用（参见下面的 img）。
在得到提示后，我发现这种现象被称为 FOUC 'Flash of unstyled Content'。
在我的情况下，它只发生在生产中。见下方视频 https://youtu.be/Zh2-1gtKOtI
它可能与样式化组件有关，因为“导航栏”是唯一没有样式化组件的部分。导航栏对我来说看起来不错。
代码库： https ://github.com/agile-ts/documentation
谢谢你^^
javascript - 消除 FOUC 和白色闪光
最近我一直在与页面加载时臭名昭著的 White Flash 作斗争，然后是 FUOC。
我使用了https://stackoverflow.com/a/53364612/11706514，它修复了 FOUC 但带回了白色闪光。
HTML 头部顶部
最终/仅 .CSS 的底部
我无法弄清楚如何有效地对抗两者。FOUC 优先，但 White Flash 可能会很刺耳。我有一个加载模式和一个纯色背景颜色，如果可能的话，我想从当前的修复中分离出来，但还有很多元素，所以我担心更复杂的修复需要太长时间才能击败 FOUC。
简单的解决方案是最好的，我的页面严重依赖 JS 的核心功能，因此不需要纯 CSS 解决方案。
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
javascript - 在 ASP.NET Core 5 MVC 中消除 Flash of Unstyled Content (FOUC)
我有一个 ASP.NET Core 5 MVC Web 应用程序，它遭受“无样式内容 Flash”（FOUC）的困扰。本质上，我的样式会在页面加载时显示一小段时间。我看到了关于处理 FOUC 的Stack Overflow 问题，建议主要是通过 CSS 或带有 CSS 类的 JavaScript 隐藏页面，然后在页面加载完成后删除该类以显示 HTML。这似乎更像是一种“技巧”，而不是实际的解决方案。我还看到了一些缩小 CSS 和压缩图像的建议。我已经这样做了，但我仍然有 FOUC。
如何避免 FOUC，特别是在 ASP.NET Core 应用程序中？
对于我的具体情况，我的所有链接和样式表都在我的主要共享布局_Layout.cshtml中。在我的所有 HTML 之后，我的 JavaScript 位于页面底部。我的页面顶部确实有一些 Razor 代码，但据我了解，此代码在服务器端运行，不应影响页面加载时间。
javascript - FOUC（无样式内容的 Flash），因为 less.js
我开始在我的项目中使用 Less.js，但是由于我将所有样式都打包在一个 .less 文件中，所以我的 FOUC 变得非常糟糕。有人知道该怎么做吗？
css - react-helmet 在运行时更改 head 标签中的 css 有滞后（在显示更新的 css 之前没有 css 1 秒）
这是一个简化的 React 组件，它使用头盔在运行时更新链接 css：
我最近刚刚使用 react-helmet 作为一种声明性方式来更改 head 标签的子标签，并且使用我上面编写的代码，在切换 css 时，当页面没有 css 样式时会出现瞬间延迟，然后 1 秒后更新的 css 显示向上。
即使在页面的初始加载期间，如果我使用 queryParameters （上面的代码没有显示查询参数方法），例如
在品牌 css 出现之前，有 1 秒钟没有 css 样式。
你能告诉我我缺少什么以及如何解决这个问题吗？