CSS交付优化：如何延迟css加载？

jm81lzqq 于 2023-01-18 发布在其他

关注(0)|答案(8)|浏览(234)

我正在尝试优化CSS交付遵循谷歌开发人员文档https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example
正如您在内联一个小CSS文件的示例中所看到的，关键的CSS内联在头部，原始的small.css在加载页面后加载。

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

关于这个例子，我的问题是：
如何在页面加载后加载一个大的css文件？

css

来源：https://stackoverflow.com/questions/19374843/css-delivery-optimization-how-to-defer-css-loading

8条答案

按热度按时间

dy2hfwbg1#

如果您不介意使用jQuery，这里有一个简单的代码片段可以帮助您解决这个问题（否则请注解，我将编写一个pure-js示例

function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='"+src+" />"));
    }
};

只需在$(document).ready()或window.onload函数中调用它，就可以开始了。
对于第二个问题，你为什么不试试呢？在你的浏览器中禁用Javascript，看看吧！

顺便说一句 *，这是惊人的多远一个简单的谷歌搜索可以让你;对于查询"post load css"，这是第四次命中... http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery

赞(0）回复(0）举报 2023-01-18

nfg76nw02#

对Fred提供的函数做了一点修改，使其更高效，并且不使用jQuery。我正在为我的网站生产使用这个函数

// to defer the loading of stylesheets
        // just add it right before the </body> tag
        // and before any javaScript file inclusion (for performance)  
        function loadStyleSheet(src){
            if (document.createStyleSheet) document.createStyleSheet(src);
            else {
                var stylesheet = document.createElement('link');
                stylesheet.href = src;
                stylesheet.rel = 'stylesheet';
                stylesheet.type = 'text/css';
                document.getElementsByTagName('head')[0].appendChild(stylesheet);
            }
        }

赞(0）回复(0）举报 2023-01-18

vbkedwbf3#

这就是您如何使用新方法，而不使用任何第三方库或额外JS：

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

link**rel=“preload”as=“style”**异步请求样式表。
链接中的onload属性允许CSS在加载完成后进行处理。
一旦onload处理程序被使用，就将其“置空”有助于某些浏览器避免在切换rel属性时重新调用该处理程序。
*noscript元素中对样式表的引用可以作为不执行JavaScript的浏览器的后备。

赞(0）回复(0）举报 2023-01-18

5n0oy7gb4#

除了弗雷德的回答：

使用jQuery和Noscript的解决方案

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        if($("body").size()>0){
                if (document.createStyleSheet){
                    document.createStyleSheet('style.css');
                }
                else {
                    $("head").append($("<link rel='stylesheet' 
                    href='style.css' 
                    type='text/css' media='screen' />"));
                }
            }
        });
    </script>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

从http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery开始

使用纯Javascript和Noscript

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    <script type="text/javascript">
          var stylesheet = document.createElement('link');
          stylesheet.href = 'style.css';
          stylesheet.rel = 'stylesheet';
          stylesheet.type = 'text/css';
          document.getElementsByTagName('head')[0].appendChild(stylesheet);
    </script>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

赞(0）回复(0）举报 2023-01-18

up9lanfz5#

试试这个片段
author声称它是由谷歌的PageSpeed团队发布的

<script>
    var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'yourCSSfile.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
              webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
</script>

赞(0）回复(0）举报 2023-01-18

bnlyeluc6#

有一种简单的方法可以异步加载CSS，只使用link标记

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

media="print"告诉浏览器异步加载用于打印CSS。
Onload在加载时将链接的媒体设置为all。
1.与mahmoud answer相比，这种方法没有优先获取css，这可能是不需要的
更多详情请参见explained here

赞(0）回复(0）举报 2023-01-18

qncylg1j7#

警告：css文件中的body{background-image: url("http://example.com/image.jpg");}将使您的css文件仍然呈现阻塞。
如果你尝试了上面所有的解决方案，仍然收到PageSpeed insights的渲染阻塞警告，那么你的css文件中可能有这个样式规则。经过几个小时的测试，结果是这个规则使得我的css文件中的ALL被PageSpeed insights标记为渲染阻塞资源。我发现同样的问题以前已经讨论过了。
我不知道为什么body{background-image: url(...)对所有的css文件都这样做！尽管我在文件中有不同的图像资源用于按钮、图标等。
我通过将此规则从.css文件中移到内联样式中来修复此问题。不幸的是，您将不得不打破您的css计划，并将此规则放在所有布局HTML文件中，而不是放在导入所有HTML布局的1个css文件中，但PageSpeed见解中的90年代和绿色值得这样做。

赞(0）回复(0）举报 2023-01-18

piwo6bdm8#

修正了我的问题，把所有的css文件放在页面底部，在body标签之后。但是这引入了一个新的问题，页面在应用样式之前加载了明显的未样式化的html。为此我修正了这个问题，在页面上引入了一个所有样式化的闪屏。

赞(0）回复(0）举报 2023-01-18