如何在不使用 JavaScript 的情况下异步加载 CSS？答案

【问题标题】：How to load CSS asynchronously without using JavaScript?如何在不使用 JavaScript 的情况下异步加载 CSS？
【发布时间】：2013-11-18 02:28:05
【问题描述】：

假设我有一个网站http://somethingsomething.com

我有 3 个 css 文件

common.css
主页.css
inner-pages.css

homepage.css 用于主页，common.css 用于整个站点，而inner-pages.css 仅用于其他页面，它是大文件。主页数据下载后是否可以加载inner-pages.css。就像我们为script 标签使用async 属性一样。据我所知async 属性仅适用于 JS 而不是 CSS

我的一位朋友建议为此使用 requirejs http://requirejs.org/docs/faq-advanced.html#css，但我不想使用 javascript 来加载 css，甚至我会想到 JS 方式我不会为此使用 require.js。因此，如果仅使用 CSS 是不可能的。什么是简单的 JS 方法来做到这一点？

【问题讨论】：

这似乎可以忽略不计，文件有多大？您将获得什么样的性能提升？我认为将所有内容缩小在一起会更明智。一旦用户浏览主页，好处就会消失。据我所知，没有 JS 无法异步加载 CSS 文件。
@DavidNguyen _ 是的，你说的我已经知道了。只是想检查是否有人有不同的意见或技巧。
正如 David Nguyen 所说，如果你缩小并将所有 css 放在一个文件中，第一次加载会很糟糕，但下一次加载会在缓存中，所以它会很快。但无论如何，我很好奇它是否可能没有 javascript...
其实我应该可以使用 iframe 加载异步...答案如下
this 可以参与讨论吗？

标签： css performance

【解决方案1】：

带有 media="bogus" 和脚下 <link> 的异步 CSS 假设我们的 HTML 结构如下：

<head>
    <!-- unimportant nonsense -->
    <link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
    <!-- other unimportant nonsense, such as content -->
    <link rel="stylesheet" href="style.css">
</body>

【讨论】：

【解决方案2】：

您可以在页面中放置一个 iframe，指向一些提供 CSS 的虚拟页面，该页面应该异步提供 CSS 文件。

<iframe src="loadcss.html"></iframe>

请注意，这似乎很简单，这会导致每个页面至少传输 2 个 css 文件，每个子页面至少传输 3 个 css 文件（如果没有缓存的话）。如果您要缩小 css，则无论如何都只有 1 次传输。

【讨论】：

【解决方案3】：

试试

$.ajax({
    url:'/css.css',
    type:'get',
    success:function(css){
        $('html').append('<style>'+css+'</style>');
    }
});

或

function getCss(url){
    $('<link>',{rel:'stylesheet',type:'text/css','href':url}).appendTo('head');
}

getCss('/css.css');

好吧抱歉我没看到你不想使用 javascript

如何使用 css @import:

<style>
@import url('/style1.css');
@import url('/style2.css');
</style>

【讨论】：

Javascript 将是最后的手段。
@import 比还要糟糕：stackoverflow.com/questions/7199364/import-vs-link

【解决方案4】：

在 <body> 而不是 <head> 中包含您的 CSS ...“似乎这个技巧会导致 Chrome 和 Firefox 更早地启动正文，并且它们根本不会阻止正文样式表。”并为 IE 添加条件：

头

<head>
  <!--[if IE]>
    <link rel="stylesheet" href="style.css"> <!-- blocking, but what else can ya do? -->
  <![endif]-->
</head>

正文

<body>
    <!--[if !IE]> -->
        <link rel="stylesheet" href="style.css" lazyload>
  <!-- <![endif]-->
</body>

Taylor Hunt@codepen.io

【讨论】：

【解决方案5】：

正如建议的那样，加载 CSS 资产不需要 Require。如果您想在不依赖 JavaScript 的情况下异步获取更大的有效负载，您应该考虑利用 HTTP/2 服务器推送来交付您的非关键样式资产。这里有一个performance technique you may find useful，用于为浏览器提供关键的 CSS 有效负载，即使在今天也能正常工作。

最后，如果您正在优化页面以提高性能，并且不想使用 Require 等繁重或复杂的工具，我有一个替代方案 minimal asset loader，如果您愿意，可以使用。

【讨论】：