CSSファイルをJavaScriptに含める

Question

私の写真をアップロードします。ページの洞察は、私のCSSファイルが私のサイトのダウンロードを遅くしていると常に言います。

解決策は何ですか？これらのファイルをjavascriptまたは非同期モードでどのように追加する必要がありますか？

JSファイルも、jQueryのように、ページの下部にあるボディークローズタグにあります。

Answer 1

CSSリソースがデフォルトでブロックされ、ブラウザがページをレンダリングする前に利用できるようにするコンテンツを待ちを意味します。これを避けるには、あなたのHTMLファイルの最後にリンクタグを置いてみてください。次に役に立つのは、メディアタイプを削除することです。このように、ブラウザはファイルをロードしますが、待機しません。

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

または、完全なソースを非同期に読み込みます。あなたのhtmlファイルの最後にこのような何かを行うことができ、更なるLIBなし：

(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を分割する可能性があることに注意してください（ページをレンダリングする前にそこにする必要がある）と、最初の装填の後に装填することができる非 - 密封部分。

Answer 2

問題をloadCSSプラグインで修正しました。 https://github.com/filamentgroup/loadCSS/blob/master/src/onloadCSS.js