CSS交付优化:如何推迟CSS加载?

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

如果你不介意使用jQuery,下面是一个简单的代码片段来帮助你。 (否则评论,我会写一个纯粹的例子

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

只需在$(document).ready()window.onload函数中调用这个函数,就可以了。

对于#2,你为什么不尝试一下? 在浏览器中禁用Javascript并查看!

顺便说一下 ,一个简单的谷歌search能给你带来多么惊人的效果; 为查询"post load css" ,这是第四次打击… http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery

对Fred提供的函数进行一些修改,使其更加高效且免费。 我在为我的网站生产中使用这个function

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

除了弗雷德的回答:

解决scheme使用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> 

试试这个片段

作者声称它是由Google的PageSpeed Team发布的

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