问题标签 [fouc]

我在我的 Vue 应用程序中使用MetaFizzy 的 Flickityvue-flickity包。当导航离开具有滑块实例的路线时，您会得到一个简短的 FOUC，显示文档中所有未设置样式的幻灯片，因为滑块被卸下（？）并且视图发生变化。vue-flickity<Flickity />

我已经尝试将它包装在 a 中<keep-alive>，但这并没有帮助。

在用户导航离开路线之前隐藏或“动画化”组件的最佳方法是什么？

我也尝试使用beforeRouteLeave()，过渡opacity到<Flickity ref="mySlider" />，0然后改变路线。我尝试了类似以下的方法，但没有按预期工作：

这是正确的方法，还是我应该采取不同的方法？

此外，如果有一种方法可以<Flickity />在不指定的情况下对所有路由上的所有实例全局执行此操作refs，那也很有用。

我已经很久没有使用 Vue，所以我正在寻找一些关于方向的指导。

Google PageSpeed 建议<style>在头部的标签中添加关键 CSS，并将外部 CSS 推迟到 HTML 的末尾。

通过在 HTML 中内联 CSS（应该分开）以及在 CSS 加载时创建 FOUC，这违反了 Web 标准。可见性可以设置为在加载 CSS 后一次性显示整个页面，但这会创建整个页面的 FOUC，看起来也不好看。

在头部使用 a 正确加载 CSS 和延迟加载 CSS 之间没有实际的时间差异<link>，因此没有真正需要延迟加载样式表。加载页面仍然需要相同的时间。当最好只显示样式页面时，为什么要为用户提供半样式页面。

我的问题是：为什么一个网络巨头谷歌会提出如此荒谬的做法，这些做法不符合标准并造成像 FOUC 这样的加载时间问题？就像提出这些想法的人没有标准的概念一样。

我正在尝试将 Emotion 添加到现有的 Gatsby 静态站点。它通常工作得很好，只是服务器渲染实际上并没有渲染样式。在加载后的一小段时间内，或者如果您禁用了 JavaScript，则永远只有一个.js全局样式文件可见。

我已经尝试了https://www.gatsbyjs.org/docs/troubleshooting-common-errors中有关清除缓存、确保已安装模块以及将软件包版本更新为最新的步骤。没运气。

这是一个可以处理的已知问题吗？

您可以在https://github.com/JoshuaKGoldberg/Goldblog/tree/945d0ca8501b3aa069ef44145e4d05daa35da505查看完整的存储库。

我正在为我的应用程序使用 NextJs，并且我在生产中使用了 FOUC。我没有使用样式化组件，只是模块化和全局 CSS/SCSS。我认为问题可能来自我的_document.js文件

所以我想在页面上显示简单的关注按钮。好简单。

在我的 JS 文件中，我有：

然后在 HTML 中我有：

一切正常，但因为按钮位于页面顶部（始终在初始视口区域内）。一旦我刷新页面（或第一次加载它）。我可以看到FOUC。是否有任何类似事件的事件正在发出，以便我最初可以进行显示none，并且当按钮“准备就绪”时，我可以使其可见？

有什么提示吗？

我得到了这个 FOUC，它让我发疯。它仅在此页面上。我相信这是由图像引起的，但我并不肯定。我觉得我已经尝试了所有方法，在 create-react-app 中是否有针对 FOUC 的修复。每个图像旁边的页面右侧的文本似乎立即闪烁，然后固定在正确的位置。我觉得这可能是由图像引起的，但我不确定。我也在使用 mat ui 网格。这是页面的外观，文本在页面顶部一直闪烁并位于居中位置。

我正在尝试使用原生 Web 组件，到目前为止我真的很喜欢它们。

我创建了一个微型站点，它有一个主页、关于页面和一个联系页面，以及一个通过更改 URL 的哈希组件来工作的菜单。

但是，我注意到一个不良影响 - 每当我从一个“页面”切换到另一个（实际上，这只是卸载一个本机 Web 组件并安装另一个）时，大约半秒钟，我看到 Web 组件呈现使用默认样式，然后使用我包含在 shadow DOM 中的样式进行绘制。

最初，我的组件是这样的：

我试图通过删除 CSS 导入来解决这个问题，并导入这样的样式：

但是，无论何时安装组件，都会出现一些未设置样式的内容。

如果仅在首次加载某种类型的组件时才发生这种情况，这不会有太大问题，但每次安装自定义组件时都可以看到人工制品。

有没有办法阻止这种情况发生？如果这意味着我可以使用漂亮、轻量级的原生 Web 组件，我什至会很高兴地放弃 shadow DOM 而只使用 BEM！

我听说可以通过使用内联样式来防止它发生，但我不想走那条路……我更愿意将 CSS 保存在一组组织良好的子目录中。

我正在尝试通过为 Nextjs 应用程序导入.scss文件来应用全局样式。_app.js

但问题是，样式并没有在页面加载时预先应用。因此，所有初始页面渲染都会发生 FOUC。

示例 1

下面给出的是上述问题的基本版本：

项目结构：

index.js文件：

_app.js文件：

app.scss文件：

package.json文件：

示例 2（使用 next-sass 的 repo）

根据@Ramakay 的回答的第三点， 它创建了一个静态散列 css 文件并将其附加到<head/>标签，但问题仍然存在。

我所期待的：

我现在得到的：

我没有使用任何外部库，如“styled-components”等。我也没有在寻找它。

我能做些什么来解决手头的问题？

在这个问题上花了几天时间从大多数 SA 和 Reddit 中寻找解决方案和想法，但无济于事。

在生产和本地加载时，每次加载都会在没有任何样式的情况下呈现整个 html，然后再注入 DOM..

目前这是我的项目关键文件：

_document.js

_app.js

index.js

正如有些人可能会看到的那样，我已经尝试了多种实现，但对于现阶段它可能是什么感到有点困惑..

任何帮助表示赞赏，我可以根据要求提供更多信息。非常感谢

我在 Next.js 中构建了我的网站，通过 Netlify 静态部署。每当我将其加载到新选项卡中时，在其余内容加载之前，我都会看到一个白色的 Flash，其中 SVG 徽标可见但没有其他内容。我不认为这是一个 Flash Of Unstyled Content，但它有一个类似的影响。我在桌面 Chrome、Safari 和 Firefox 上体验过，但在移动设备上看不到。我已经解决了几个小时的问题，而且离解决问题还很远。如果有人想看看，这里是回购。任何见解都非常感谢。