用JavaScript包含我的CSS文件

Question

我上传了我的问题图片。页面见解总是说，我的CSS文件正在减慢我的网站下载速度。

这是什么解决方案？我应该如何使用javascript或异步模式添加这些文件？

我的JS文件，如jQuery，也位于页面底部的正文结束标记。

Answer 1

默认情况下，CSS资源是阻止的，这意味着浏览器在呈现页面之前等待内容可用。为避免这种情况，您可以尝试将链接标记放在html文件的末尾，这可以提供帮助。下一个有用的想法是删除媒体类型（或者在完成后更好地设置它）。像这样浏览器加载文件但不等待。

<link rel="stylesheet" 
   href="css.css" 
   media="none" 
   onload="if(media!='all')media='all'"> 

或者您加载完整的源异步。如果没有任何进一步的lib，你可以在html文件的末尾执行类似的操作：

(function() {
  // caniuse requestAnimationframe?
  var raf = window.RequestAnimationFrame  ||
      window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame;

  // defer loading of all non criticial CSS
  function deferLoad() {

    // put all relevant styles here
    var asyncStyleSheets = [
      '/stylesheets/async-stylesheet-1.css',
      '/stylesheets/async-stylesheet-2.css'
    ];

    var head = document.getElementsByTagName('head')[0];

    for (var i = 0; i < asyncStyleSheets.length; i++) {
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = asyncStyleSheets[i];
        head.appendChild(link);
    }
  }

  if (raf) {
    raf(deferLoad);
  } else if (window.addEventListener) {
    window.addEventListener("load", deferLoad, false);
  } else if (window.attachEvent) {
    window.attachEvent("onload", deferLoad);
  } else {
    window.onload = deferLoad;
  }
})();

但请注意，您可能将CSS拆分为关键部分（需要在页面渲染之前存在）和初始加载后可以加载的非crictical部分。

Answer 2

我用loadCSS插件解决了这个问题。 https://github.com/filamentgroup/loadCSS/blob/master/src/onloadCSS.js