在js之前加載css文件

我有一個內部風格，後面跟着外部風格。我注意到這個頁面是空白的，直到外部的CSS沒有加載。所以我將它改爲下面的代碼。現在外部的CSS請求是在js之後創建的。在js之前加載css文件

爲什麼對於上述兩個以及如何在js之前創建css請求。有沒有什麼好處（下面的代碼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

添加preload大多是沒有的伎倆

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

瀏覽器現在對CSS的要求。然後它打電話給js。然後它將CSS標籤添加到頭部。最後，嘗試重新調用獲取CSS，但由於調用正在進行或完成，它只是加載它。雖然CSS需要時間，但還是有FOUC的問題。

來源

2017-04-27 02:37:40 aWebDeveloper

在body加載時調用的函數中使用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更改CSS以及DOM。所以最好首先加載css。

來源

2017-03-26 18:43:32

發生這種情況是因爲頁面從上到下呈現。所以我想這個瀏覽器呈現給你內聯樣式，並執行內聯腳本，它將鏈接到一個樣式。然後進一步執行外部腳本。之後，它會加載您最近添加的樣式表。

所以，我會太天真地問，但爲什麼不把你的樣式錶鏈接到頭部？

來源

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>

一個網頁被解析從上到下。

所以，儘量把style你head標籤，然後將scripts在短短body標籤

在腳本結束前，

的事件監聽添加到窗口時，在DOM加載內容，使腳本標記，附加src並將其附加到Head。

來源

2017-03-26 19:00:19

在js之前加載css文件

回答

相關問題