页面加载后获取css文件

Question

我正在关注一个爱好项目的css文件：

• normalize.css
• main.css
• viewports.css
• bigFile.css

现在normalize.css，main.css＆viewports.css是在整个网站的每次访问页面上加载的3个文件。但是bigFile.css包含许多在网站内部页面中使用的CSS样式。现在，我将这些文件加载​​到首页中，index.html如下所示：

<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>

我已合并viewports.css到内部main.css，当前文件大小很好。我无法合并，bigFile.css因为那main.css会很大，浏览器将等待渲染它。还要注意，我将使用github页面，它将过期标头设置为几乎10分钟，从而使缓存状态对我不利。并假设用户最有可能导航到下一页。

bigfile.css页面成功加载后，有什么方法可以加载，从而节省了下一页加载的时间。我不介意使用js解决方案，直到它在非js网站上全面恢复（例如，直到用户实际导航到下一页才加载它们）。另外，对于这样的小任务，我也不喜欢jquery。谢谢！

Answer 1

您可以在页面加载并将函数下面的代码放入代码后执行函数：

<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
  document.createStyleSheet('http://example.com/big.css');
}
else {
  var styles = "@import url('http://example.com/big.css');";
  var newSS=document.createElement('link');
  newSS.rel='stylesheet';
  newSS.href='data:text/css,'+escape(styles);
  document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>

PS不要忘记仅在页面加载事件完成时才调用该函数，否则会出现相同的性能问题。