如何在不使用 JavaScript 的情况下异步加载 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19819074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load CSS asynchronously without using JavaScript?
提问by Jitendra Vyas
Suppose if I have a website http://somethingsomething.com
假设我有一个网站http://somethingsomething.com
And I have 3 css file
我有 3 个 css 文件
- common.css
- homepage.css
- inner-pages.css
- 常见的.css
- 主页.css
- 内页.css
homepage.cssis required for homepage and common.cssis for whole site but inner-pages.cssis for other pages only and it's big file. Is it possible to load inner-pages.cssafter homepage data download. In the same way like we use asyncattribute for scripttag. As far as I know asyncattribute is only for JS not CSS
homepage.css主页需要，common.css整个网站都需要，但inner-pages.css仅适用于其他页面，而且是大文件。是否可以inner-pages.css在主页数据下载后加载。就像我们使用async属性作为script标签一样。据我所知， async属性仅适用于 JS 而不是 CSS
my one friend suggested to use requirejs for this http://requirejs.org/docs/faq-advanced.html#cssbut I don't want to use javascript to load css and even I would think upon JS way i would not use require.js just for this. So if it is not possible with CSS only. what would be the simple JS way to do this?
我的一位朋友建议为此http://requirejs.org/docs/faq-advanced.html#css使用 requirejs但我不想使用 javascript 来加载 css 甚至我会认为我不会使用 JS 方式require.js 就是为了这个。因此，如果仅使用 CSS 是不可能的。这样做的简单 JS 方法是什么？
回答by Abhishek Gupta
Async CSS with media="bogus" and a <link>at the foot
Say we've got our HTML structured like this:
带有 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>
More at http://codepen.io/Tigt/post/async-css-without-javascript
回答by David Nguyen
You can place an iframe in your page pointing to some dummy page that serves the CSS, that should serve the CSS file async.
您可以在页面中放置一个 iframe，指向某个为 CSS 提供服务的虚拟页面，该页面应该为 CSS 文件异步提供服务。
<iframe src="loadcss.html"></iframe>
<iframe src="loadcss.html"></iframe>
Do note it seems pretty trivial, this causes a minimum of 2 css file transfers per page and 3 css file transfers per child page (if it isn't cached). If you were to minify the css you would only have 1 transfer regardless.
请注意，这看起来很简单，这会导致每页最少 2 个 css 文件传输，每个子页面最少 3 个 css 文件传输（如果它没有缓存）。如果您要缩小 css，则无论如何都只能进行 1 次传输。
回答by David Nguyen
try
尝试
$.ajax({
url:'/css.css',
type:'get',
success:function(css){
$('html').append('<style>'+css+'</style>');
}
});
or
或者
function getCss(url){
$('<link>',{rel:'stylesheet',type:'text/css','href':url}).appendTo('head');
}
getCss('/css.css');
ok sorry I didn't see you don't want to use javascript
好的，抱歉，我没有看到您不想使用 javascript
how about using css @import:
使用 css @import 怎么样：
<style>
@import url('/style1.css');
@import url('/style2.css');
</style>
回答by Yatko
Include your CSS in the <body>instead of <head>... "it seems this trick causes Chrome & Firefox to start the body earlier, and they simply don't block for body stylesheets." and add a condition for IE:
将您的 CSS 包含在<body>而不是<head>......“看来这个技巧会导致 Chrome 和 Firefox 更早地启动正文，而且它们根本不会阻止正文样式表。” 并为 IE 添加条件：
head
头
<head>
<!--[if IE]>
<link rel="stylesheet" href="style.css"> <!-- blocking, but what else can ya do? -->
<![endif]-->
</head>
body
身体
<body>
<!--[if !IE]> -->
<link rel="stylesheet" href="style.css" lazyload>
<!-- <![endif]-->
</body>
by Taylor Hunt@codepen.io
由泰勒亨特@ codepen.io
回答by Josh Habdas
As suggested Require is not necessary for loading CSS assets. If you want to get your larger payloads asynchronously without relying on JavaScript you should be looking at leveraging HTTP/2 Server Push to deliver your non-critical style assets. And here's a performance technique you may find usefulfor delivering critical CSS payloads for browsers which works well even today.
正如所建议的，加载 CSS 资产不需要 Require。如果您想在不依赖 JavaScript 的情况下异步获取更大的有效负载，您应该考虑利用 HTTP/2 服务器推送来交付您的非关键样式资产。这是一种性能技术，您可能会发现它对于为浏览器提供关键 CSS 有效负载很有用，即使在今天也能很好地工作。
Finally, if you are optimizing your pages for performance and don't want to pull in heavy or complicated tools like Require I've an alternative minimal asset loaderyou may use if you like.
最后，如果您正在优化您的页面以提高性能，并且不想使用像 Require 这样的繁重或复杂的工具，我有一个替代的最小资产加载器，您可以根据需要使用。
