65

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

4

8 回答 8

49

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

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

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

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

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

于 2013-10-15T06:55:48.240 回答
38

对 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);
            }
        }
于 2014-03-07T16:14:03.357 回答
14

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

<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 的浏览器的后备。
于 2020-11-30T15:26:54.317 回答
11

除了弗雷德的回答：

使用 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>
于 2014-01-12T16:08:29.733 回答
9

试试这个片段

作者声称它是由 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>
于 2015-10-12T18:48:57.723 回答
5

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

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

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

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

于 2018-08-22T02:10:14.387 回答
4

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

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

更多细节在这里解释

于 2021-06-25T13:38:45.577 回答
0

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

于 2019-11-15T10:41:20.943 回答