Google建议使用以下JS代码(https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)来优化网页速度(异步CSS加载)
<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'small.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>
Run Code Online (Sandbox Code Playgroud)
当我使用上面的代码时,Page Speed Insights(https://developers.google.com/speed/pagespeed/insights/)会识别它并为页面提供更高的分数.但问题是,这段代码在旧的IE中不起作用.
例如,IE 8抛出错误"未定义对象requestAnimationFrame".问题很明显,IE 8不支持RAF,因此由于未定义的对象而抛出错误.
我需要网站在这些旧的IE中也能正常运行,所以我决定更新我的代码如下:
<script>
function loadCss() {
var l = document.createElement('link');
l.href = 'http://static.xyz.com/css/style.min.css?v=23';
l.rel = 'stylesheet';
l.type = 'text/css';
l.media = 'screen';
document.getElementsByTagName('head')[0].appendChild(l);
}
if (typeof requestAnimationFrame === 'function') { …Run Code Online (Sandbox Code Playgroud)