为什么我的网站会闪烁无样式的内容？答案

【问题标题】：Why does my website flash unstyled content?为什么我的网站会闪烁无样式的内容？
【发布时间】：2022-12-21 00:13:21
【问题描述】：

我在 netlify 上托管以下 astro 项目，每次刷新页面时，我都会看到一些无样式的内容。任何帮助，将不胜感激。

我使用 tailwindCss 处理样式，页面的主要布局是：

---
import Navbar from "../components/Navbar.svelte";
import Footer from "../components/Footer.astro";
---
<style is:global>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
</style>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />        
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>JMJM</title>
        <script is:inline>
            let domReady = (cb) => {
                document.readyState === 'interactive' || document.readyState === 'complete'
                    ? cb()
                    : document.addEventListener('DOMContentLoaded', cb);
            };

            domReady(() => {
                // Display body when DOM is loaded
                document.body.style.visibility = 'visible';
            });
            const html = document.querySelector("html");
            const theme = (() => {
              if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
                return localStorage.getItem("theme");
              }
              if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
                return "dark";
              }
              return "light";
            })();

            if (theme === "light") {
              html.classList.remove("dark");
            } else {
              html.classList.add("dark");
            }
            window.localStorage.setItem("theme", theme);
          </script>
    </head>
    <body style="hidden" class="bg-snow2 text-night0 dark:bg-night0 dark:text-snow2">       
        <script>0</script>
        <Navbar client:load />
        <div class="max-w-[1080px] mx-auto">
            <slot />
        </div>
        <Footer />
        <noscript><style>body { visibility: visible; }</style></noscript>
    </body>
</html>

完整来源：https://github.com/jmjaimesmendoza/portfolio

【问题讨论】：

标签： html css astrojs

【解决方案1】：

Astro 为每个 url 生成单独的页面。因此，当您访问一个新页面时，它必须加载一个新的 css 文件。如果加载该 css 文件需要一些时间，您可能会看到一闪而过的无样式内容。您可以将样式切换为内联样式，但这需要您移开 front tailwindcss

【讨论】：