CSS 预加载未按预期工作，阻止样式最后完成

问题描述 投票：0回答：1

我一直在优化新网站的页面速度，但遇到了 CSS 问题。基本上，我在第一页上有一个小的首屏样式表，它是关键的 CSS，然后我稍后加载非关键（大文件）（预加载）。然而，每当我添加延迟的 Bootstrap 时，由于某种原因，它不会事先应用关键样式，无需 Bootstrap 也能正常工作。

这是我的：

<head>
        <meta charset="UTF-8" />
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <link rel="icon" href="/favicon.ico" sizes="48x48">
        <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
        <link rel="manifest" href="/site.webmanifest">

        <!-- This is the critical ABOVE THE FOLD styles THIS SHOULD BE DONE FIRST -->
        <link rel="preload" href="/css/critical/index.css>

        <!-- Custom User Styles -->
        <link rel="stylesheet" href="/css/custom.min.css">

        <!-- These are the full stylesheets that should load AFTER the critical styles and shouldn't effect CLS. SHOULD BE DONE LAST-->
        <link rel="preload" href="/css/plugins/bootstrap.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
        <noscript><link rel="stylesheet" href="/css/plugins/bootstrap.min.css"></noscript>
    
        <link rel="preload" href="/css/style.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
        <noscript><link rel="stylesheet" href="/css/style.min.css"></noscript>


        <!-- Misc other stuff -->
        <link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin>
        <link fetchpriority="high" rel="preload" as="image" href="/img/opt/under-the-sea.webp" type="image/webp"/>
        <link fetchpriority="high" rel="preload" as="image" href="/img/opt/orcas.jpg" type="image/webp"/>

</head>

我也尝试过预加载关键的 CSS，即使它加载并看似先渲染，我仍然会遇到很大的布局变化。

我也尝试过使用带有标签的内部样式，但是一旦应用 Bootstrap 和其他样式，它们就不会优先，因为它们是外部的。

演示站点在这里：https://cardera-demo.onrender.com/

html css preload
1个回答
0
投票

我已成功复制您的问题。

例如，当我使用与原始CSS相同的加载顺序时，我无法在index.css中设置主体背景颜色：var(--bs-body-bg)，它总是使用bootstrap.min.css背景-颜色。这是因为预加载后，您使用 JavaScript（onload 事件）手动将 rel="preload" 切换为 rel="stylesheet"。此时，浏览器应用 bootstrap.min.css（大型 CSS 文件）中的样式，覆盖 index.css 颜色。

enter image description here

当我将CSS加载顺序更改为首先预加载bootstrap.min.css，然后加载index.css时。然后将正确的主体背景颜色设置为index.css中定义的颜色

enter image description here

我相信 CSS 特异性与此行为无关，而只涉及 CSS 加载的顺序。解决方案是在预加载CSS之后加载索引CSS。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.