如何让<script>标签在HTML加载前执行？解决CSS加载闪烁问题

Great question—dealing with that annoying flash-of-unstyled-content (FOUC) when loading page-specific CSS dynamically is a super common pain point. Let's walk through practical solutions and better practices to eliminate the flicker and optimize your setup.

Why Your Current Approach Causes Flicker #

Your jQuery code runs after document.ready(), which fires after the browser has already started rendering the bare HTML. By the time you inject the <link> tag, the page is already visible without styles. When the CSS finally loads, the browser re-renders the page with styles, causing that jarring flash.

Solution 1: Server-Side Conditional Injection (Best for Static/Server-Rendered Sites) #

The cleanest fix is to inject the correct stylesheet directly into the <head> before sending the HTML to the browser. This way, the browser loads the CSS alongside the HTML, with zero flicker.

Here’s how you might implement this with common server-side languages:

Example with PHP: #

<head>
    <!-- Load shared global styles first -->
    <link rel="stylesheet" href="/Assets/css/common.css">

    <!-- Inject page-specific styles based on the request path -->
    <?php
        $currentPath = $_SERVER['REQUEST_URI'];
        if ($currentPath === '/') {
            echo '<link rel="stylesheet" href="/Assets/css/main.css" type="text/css">';
        } elseif ($currentPath === '/about') {
            echo '<link rel="stylesheet" href="/Assets/css/about.css" type="text/css">';
        }
    ?>
</head>

Example with Node.js/Express (EJS Templating): #

Pass the current path to your template and conditionally render the stylesheet:

<head>
    <link rel="stylesheet" href="/Assets/css/common.css">
    <% if (currentPath === '/') { %>
        <link rel="stylesheet" href="/Assets/css/main.css">
    <% } else if (currentPath === '/about') { %>
        <link rel="stylesheet" href="/Assets/css/about.css">
    <% } %>
</head>

Solution 2: Preload CSS & Show Page After Load (For Client-Side Only) #

If server-side changes aren’t an option, use <link rel="preload"> to prioritize loading the page-specific CSS, then only show the page once the styles are ready. This prevents the unstyled HTML from being visible at all.

<head>
    <!-- Shared styles -->
    <link rel="stylesheet" href="/Assets/css/common.css">

    <!-- Temporary style to hide the page until CSS loads -->
    <style>
        body {
            opacity: 0;
            transition: opacity 0.15s ease-in-out; /* Smooth fade-in */
        }
    </style>

    <script>
        // Determine which CSS file to load
        const path = window.location.pathname;
        const cssUrl = path === '/' 
            ? '/Assets/css/main.css' 
            : path === '/about' 
                ? '/Assets/css/about.css' 
                : '';

        if (cssUrl) {
            // Create a preload link to fetch the CSS quickly
            const link = document.createElement('link');
            link.rel = 'preload';
            link.href = cssUrl;
            link.as = 'style';

            // Once loaded, convert to a stylesheet and show the page
            link.onload = () => {
                link.rel = 'stylesheet';
                document.body.style.opacity = 1;
            };

            document.head.appendChild(link);
        } else {
            // No page-specific CSS? Show the page immediately
            document.body.style.opacity = 1;
        }
    </script>
</head>

Solution 3: Use Media Attribute to Delay Style Application #

Another client-side trick is to add the page-specific stylesheet to the <head> upfront, but use a media query that doesn’t match the current device (like media="print"). This tells the browser to load the CSS but not apply it until you switch the media attribute to all.

<head>
    <link rel="stylesheet" href="/Assets/css/common.css">
    <!-- Add the CSS but don't apply it yet -->
    <link id="page-styles" rel="stylesheet" href="" media="not all">

    <script>
        const path = window.location.pathname;
        const cssUrl = path === '/' 
            ? '/Assets/css/main.css' 
            : path === '/about' 
                ? '/Assets/css/about.css' 
                : '';

        if (cssUrl) {
            const styleLink = document.getElementById('page-styles');
            styleLink.href = cssUrl;
            // When the CSS loads, switch media to apply styles
            styleLink.onload = () => {
                styleLink.media = 'all';
            };
        }
    </script>
</head>

Long-Term Best Practice: Code Splitting with Build Tools #

If you’re using a modern build tool like Webpack, Vite, or Rollup, leverage code splitting to bundle page-specific CSS with their corresponding page code. Most frontend frameworks (React, Vue, Svelte) integrate this seamlessly with their routing systems:

• In Vue, lazy-loaded components paired with <router-view> will automatically split your CSS into chunks that load only when the user navigates to that page.
• In React, React.lazy() and Suspense handle chunk loading, with CSS-in-JS or CSS modules scoped to each component.

This approach eliminates FOUC by ensuring the CSS for a page loads exactly when it’s needed, without manual scripting.

内容的提问来源于stack exchange，提问作者Scott Selke