堆栈内存溢出
  繁体   English   中英

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

[英]CSS delivery optimization: How to defer css loading?

 原文  2013-10-15 06:47:04  9   8    javascript/ html/ css/ google-pagespeed/ deferred-loading

问题描述

我正在尝试按照开发人员的谷歌文档优化 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 文件？

8 个解决方案

解决方案1
 49 已采纳  2013-10-15 06:55:48

如果您不介意使用 jQuery，这里有一个简单的代码片段可以帮助您。 （否则评论，我会写一个纯js的例子

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

只需在您的$(document).ready()或window.onload函数中调用$(document).ready()可以了。

对于#2，你为什么不试试呢？ 在您的浏览器中禁用 Javascript 并查看！

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

解决方案2
 38  2014-03-07 16:14:03

对 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);
            }
        }

解决方案3
 11  2014-01-12 16:08:29

除了弗雷德的回答：

使用 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>

解决方案4
 9  2015-10-12 18:48:57

试试这个片段

作者声称它是由 Google 的 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>

解决方案5
 9  2020-11-30 15:26:54

这是您使用新方法的方式：

<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 的浏览器的后备。

解决方案6
 5  2018-08-22 02:10:14

警告：css 文件中的body{background-image: url("http://example.com/image.jpg");}将使您的 css 文件仍然阻塞渲染。

如果您尝试了上述所有解决方案，但仍然收到来自 PageSpeed Insights 的渲染阻止警告，那么您的 css 文件中可能包含此样式规则。 经过数小时的测试，结果证明是这条规则使我的所有css 都在 PageSpeed 洞察中被标记为阻止渲染的资源。 我发现之前已经讨论过同样的问题。

我不知道为什么body{background-image: url(...)对所有 css 文件都这样做！，尽管我在文件中为按钮、图标等提供了不同的图像资源。

我通过从.css文件中移动此规则并将其放入内联样式来解决此问题。 不幸的是，你将不得不打破你的 css 计划并将规则放在你所有的布局 HTML 文件中，而不是在所有 HTML 布局中导入的 1 个 css 文件中，但 PageSpeed 见解中的 90 年代和绿色值得它。

解决方案7
 1  2021-06-25 13:38:45

有一种简单的方法可以只使用链接标签异步加载 CSS

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
  1. media="print"告诉浏览器异步加载用于打印的 CSS。
  2. Onload 在加载时将链接的媒体设置为 all。
  3. 与 mahmoud 的回答相比，这种方法不优先获取可能不需要的 css

更多细节在这里解释

解决方案8
 0  2019-11-15 10:41:20

通过引入将所有 css 文件放置在页面底部的 body 标记之后来修复我的问题。 但这引入了一个新问题，页面在应用样式之前加载未设置样式的 html 数毫秒。 为此，我通过在页面上引入所有样式的闪屏来解决这个问题。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用导入时如何延迟加载 css 渲染阻止CSS-延迟加载CSS文件 优化CSS交付…但是我正在用JS加载样式 推迟加载js如何？ 推迟HTML，CSS和Javascript函数 如何在 next.js 中延迟加载渲染阻塞 css？ 如何推迟加载css文件（谷歌速度洞察） 如何延迟加载 JavaScript 文件？ 如何使用Google Page Speed CSS加载脚本延迟多个CSS文件 根据Google推荐的优化CSS交付
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM