jsの前にCSSファイルをロード

私は内部スタイルとそれに続く外部スタイルを持っていました。私は、外部のCSSが読み込まれなくなるまでページが空白であることに気づいた。そこで以下のコードに変更しました。外部のCSS要求は、jsの後に行われます。jsの前にCSSファイルをロード

上記の両方の理由とjsの前にcss requestを作成するにはどうすればよいですか。それには利点がありますか（以下のコードではjsの前にcss）。

<body> 
    <style> 

    body { 
     background: #333; 
    } 
    </style> 
    <script> 
    var headHTML = document.getElementsByTagName('head')[0].innerHTML; 
    headHTML += '<link type="text/css" rel="stylesheet" href="build/main.css">'; 
    document.getElementsByTagName('head')[0].innerHTML = headHTML; 
    </script> 

    <!-- The polyfills js is generated during the build process --> 
    <script src="build/polyfills.js"></script>

出典

2017-03-26 aWebDeveloper

は、ほとんどのトリック

<link rel="preload" href="build/main.css" as="style">

ブラウザは現在、CSSの要求を行いました。それから、jsを呼び出す。次に、頭にCSSタグを追加します。最後に、CSSを取得するために呼び出しを再作成しようとしますが、呼び出しが進行中であるか、完了しているので、呼び出しがロードされます。 CSSに時間がかかる場合でもFOUCの問題があります。

出典

2017-04-27 02:37:40 aWebDeveloper

setTimeoutは、ボディの読み込み時に呼び出される関数で使用します。

<body onload="loadPage()">

function loadPage() { 
//code to load css 
setTimeout(function() { 
//code to load js 
}, 1); 
}

私はそれが仕事だと思います。それが役に立てば幸い。

出典

2017-03-26 18:33:58 Sank6

あなたのページのビジュアルなので、スタイルをロードすることが重要です。これは、ユーザーが最初に目にするものです。

JavaScriptを使用してDOMと一緒にCSSを変更することもできます。したがって、まずCSSを読み込むことをお勧めします。

出典

2017-03-26 18:43:32

これは、ページが上から下にレンダリングされるために発生します。だから私はブラウザがインラインスタイルをレンダリングし、スタイルにリンクするuppendsインラインスクリプトを実行すると思います。その後、さらに進んで外部スクリプトを実行します。その後、新しく追加されたスタイルシートが読み込まれます。

私は尋ねるにはあまりにも素朴ですが、なぜあなたのスタイルシートのリンクを頭に入れないのですか？

出典

2017-03-26 18:53:29

"外部CSSが読み込まれなくなるまでページが空白だったので、これを以下のコードに変更しました。外部CSSリクエストはjsの後に作成されます。 – aWebDeveloper

もちろん、普通の人と同じようにあなたのCSSファイルを置くべきです:)。このコードはにつれてしかし、あなたは本当にそれが起こるようにしたい場合は、それはつもりだとして醜い取得：

<script> 
    var head = document.getElementsByTagName('head')[0], 
     link = document.createElement('link'); 
    link.setAttribute('rel', 'stylesheet'); 
    link.setAttribute('href', 'style.css'); 
    var sheet = "sheet", cssRules = "cssRules"; 
    if (!('sheet' in link)) { 
     sheet = "styleSheet"; 
     cssRules = "rules"; 
    } 
    var waitForCSS = setInterval(function() { 
     if (link[sheet]) { 

      // now you can load your javascript files here like I did with CSS 
      // or just use any js code you want. 


      clearInterval(waitForCSS); 
     } 
    }, 10); 
    head.appendChild(link); 
</script>

出典

2017-03-26 18:59:48 moisrex

これを行う方法を

<head> 
 
    <link type="text/css" rel="stylesheet" href="build/main.css"> 
 
    <style> 
 
    body { 
 
     background: #333; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
<!-- 
 
Rest of your code in body 
 

 
//--> 
 
<!--Body is going to end after the below //--> 
 
<script> 
 
    window.addEventListener("DOMContentLoaded",function(){ 
 
    var sc=document.createElement('script'); 
 
    sc.src="build/polyfills.js"; 
 
    document.head.appendChild(sc); 
 
    }); 
 
</script> 
 
</body>

Webページが解析されます上から下まで。ドムコンテンツがロードされたときに

だから、あなたのheadタグでstyleを入れて、スクリプトでbodyタグ

の直前、最後にscriptsを配置してみてください、

が作る、ウィンドウにイベントリスナーを追加しますスクリプトタグを追加し、srcに追加してHeadに追加します。 preloadを追加

出典

2017-03-26 19:00:19

jsの前にCSSファイルをロード

答えて

関連する問題