如何以正確的方式加載css異步？

作爲了解更多關於優化網站的測試，我一直試圖讓我的網站在PageSpeed Insights上獲得完美的分數。除了CSS交付之外，一切都很順利。如何以正確的方式加載css異步？

我確實設法通過使用預加載標籤來獲得完美結果，但由於某些原因，未針對Firefox加載。所以我嘗試使用其他解決方案。

然後我切換到這一點：

<link rel="stylesheet" href="~/css/site.min.css" media="none" onload="if(media !== 'all')media='all';"> 
<noscript><link rel="stylesheet" href="~/css/site.min.css"></noscript>

這似乎是非常有效的，但的PageSpeed不把它撿起來，因此只給了我85分的評價。

當我在頭部使用<link rel="stylesheet" href="~/css/site.min.css" media="none"/>，在身體的末端使用<link rel="stylesheet" href="~/css/site.min.css">時，也發生了同樣的情況。

然後我試圖加載我的JavaScript的CSS是這樣的：

<noscript id="deferred-styles"> 
    <link rel="stylesheet" href="~/css/site.min.css"/> 
</noscript> 
<script> 
    var loadDeferredStyles = function() { 
     var addStylesNode = document.getElementById("deferred-styles"); 
     var replacement = document.createElement("div"); 
     replacement.innerHTML = addStylesNode.textContent; 
     document.body.appendChild(replacement); 
     addStylesNode.parentElement.removeChild(addStylesNode); 
    }; 

    var raf = requestAnimationFrame || 
     mozRequestAnimationFrame || 
     webkitRequestAnimationFrame || 
     msRequestAnimationFrame; 
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); }); 
    else window.addEventListener('load', loadDeferredStyles); 
</script>

但是，這也有同樣的效果！ Pagespeed沒有拿起它，給了我一個糟糕的評價。爲什麼要這樣做？因爲上面的代碼可以在他們的網站上找到！

來源

2017-07-31 user2657943

-1

這就是我在</body>之前使用的，並且工作正常。

\t <script type="text/javascript"> 
 

 
\t function downloadAtOnload() { 
 
\t // Dynamically load CSS 
 
\t var ls = document.createElement("link"); 
 
    \t ls.rel="stylesheet"; 
 
    \t ls.href= "css/my-css-file.css"; 
 
    \t document.getElementsByTagName("head")[0].appendChild(ls); 
 

 
\t } 
 
\t if (window.addEventListener) window.addEventListener("load", downloadAtOnload, false); 
 
\t else if (window.attachEvent) window.attachEvent("onload", downloadAtOnload); 
 
\t else window.onload = downloadAtOnload; 
 
\t </script>

來源

2017-07-31 10:57:10 Gerard

這似乎不適用於我。 Pagespeed仍然告訴我優化CSS遞送 – user2657943

奇怪。當我從我的頁面中刪除它時，Pagespeed會告訴我優化。當我再次添加代碼時，Pagespeed是一個快樂的兔子，我得分97. – Gerard

@Gerard我認爲這是發生的，因爲你的代碼在pagespeed測試完成後運行。當你刪除你的代碼時，你的css文件被立即調用。 –

根據我與谷歌的PageSpeed經驗，用於優化CSS交付你必須寫webpage.So的第一折的內聯CSS代碼，它可以畫快，休息你可以在外部文件中寫入css。最小化和連接頁面中使用的CSS文件。請參考此鏈接瞭解更多信息optimize css delivery

來源

2017-07-31 11:12:04

所以我所擁有的是一個內嵌的加載微調器。這個微調器是在一個風格的標籤風格。內聯樣式中的其餘部分也處於隱藏狀態。在被加載的css文件中，我隱藏了微調器並顯示頁面。這是一個好方法嗎？這是他們的意思嗎？ – user2657943

你的拆卸裝載機的邏輯是什麼？你如何拆卸裝載機。？我的意思是如果數據是加載器或者你已經修復了一段時間？ –

如果你看到代碼[這裏]（https://raw.githubusercontent.com/arnvanhoutte/arnvanhoutte/ed0f87ebc0e5ddd2bcf269180a49ad678920bd6f/arnvanhoutte/Views/Shared/_Layout.cshtml），可能會更容易。在這裏，您看到我將頁面設置爲不顯示任何內容，並且我的微調控制器佔用了屏幕。在site.css文件中，我隱藏了微調器並顯示了我的頁面。所以當css被加載時，微調器已經消失 – user2657943

如何以正確的方式加載css異步？

回答

相關問題