包括我的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

回答

相关问题