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

Question

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

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

的建议

另外，如果有一个更简单的代码片段可以使用，但仍然可以完成工作，我也 100% 愿意接受它！我找到了几个关于 CSS 交付优化的不同答案，但是 none 我找到了交付多个样式表的帐户。

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

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

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

Array of stylesheets to optimize CSS delivery

css

pagespeed