包括我的CSS文件與JavaScript

-5

我上傳了一個我的問題的圖片。頁面洞察總是說，我的CSS文件正在放慢我的網站下載。包括我的CSS文件與JavaScript

這是什麼解決方案？我應該如何使用JavaScript或異步模式添加這些文件？

我的JS文件，如jQuery，也位於頁面底部的正文結束標記處。

2017-02-03 Dave599

您應該將該消息的文本放入問題中，而不是包含文本的屏幕截圖。該圖片很難閱讀，「在此輸入圖片說明」根本無助於盲人用戶。 – BSMP

嘗試https://github.com/filamentgroup/loadCSS/。如果您動態加載樣式，在HTML的頭部部分內嵌關鍵樣式（對於滾動前的網站的可見部分）是一個不錯的主意，這樣觀看者在首次訪問時不會看到無格式的內容。 – Davey

我試過，但我不明白。我可以從這個庫中包含哪些文件？我包括來自src文件夾的loadcss文件，並且我得到errror消息，loadCSS函數不存在。 – Dave599

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部分。

來源

2017-02-03 20:03:38

但我想添加約3-4個CSS文件。這個JS腳本會加快我的頁面？ – Dave599

@ Dave599一個好主意是將所有CSS壓縮成一個文件，並且是加載資源會加速初始渲染。我已經更新了我的回答 –

loadCSS（「css/font-awesome.min.css」）; loadCSS（「css/bootstrap.min.css」）; loadCSS（「css/jquery.bxlider.css」）; loadCSS（「css/style.css」）; 我可以只讓這3個css文件？ – Dave599

-1

我解決了loadCSS插件的問題。 https://github.com/filamentgroup/loadCSS/blob/master/src/onloadCSS.js

來源

2017-02-04 08:06:46 Dave599

這不是一個答案 –

包括我的CSS文件與JavaScript

回答

相關問題