Question

我目前正在使用此代码来优化我的css投放，但这仅适用于 一个样式表 。如何将其编辑为 接受一系列样式表 ？

此代码摘自Google PageSpeed Insights developers.google.com/speed/docs/insights/OptimizeCSSDelivery

中的建议

此外，如果有一个更简单的代码片段仍然可以完成工作，我也100％对此开放！我已经找到了CSS传递优化的几个不同答案，但我没有找到提供多个样式表的帐号。

//add Font Awesome
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.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);

Answer 1

您可以创建一个数组loop through it。

＆＃13;

var cb = function() {
  var sheets = [
    '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css',
    '//maxcdn.bootstrapcdn.com/font-awesome2/4.3.0/css/font-awesome.min.css',
    '//maxcdn.bootstrapcdn.com/font-awesome3/4.3.0/css/font-awesome.min.css' ];
  
  var h = document.getElementsByTagName('head')[0]; 

  for (var i = 0; i < sheets.length; i++) {
    var l = document.createElement('link'); 
    l.rel = 'stylesheet';
    l.href = sheets[i];
    //h.parentNode.insertBefore(l, h); // This would insert them before the head.
    h.appendChild(l); // Insert them inside the head.
  }  
};

var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);

＆＃13;

用于优化CSS交付的样式表数组

1 个答案: