小编Mat*_*tak的帖子

使用requestAnimationFrame异步加载CSS样式表

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)

html javascript css pagespeed

7
推荐指数
1
解决办法
1594
查看次数

标签 统计

css ×1

html ×1

javascript ×1

pagespeed ×1