HTML5 Boilerplate和cirical渲染路径/ deffering脚本和样式

我用于基于HTML5 Boilerplate：样式和modenizr在头部，jQuery（谷歌CDN或托管文件）和关闭正文标记之前的脚本来构建我的网站。类似的东西：HTML5 Boilerplate和cirical渲染路径/ deffering脚本和样式

<!DOCTYPE html> 
<!-- modernizr conditional comments here --> 
<html class="no-js"> 
    <head> 
     <link rel="stylesheet" href="css/normalize.css"> 
     <link rel="stylesheet" href="css/main.css"> 
     <script src="js/vendor/modernizr-2.6.2.min.js"></script> 
    </head> 
    <body> 

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script> 
     <script src="js/plugins.js"></script> 
     <script src="js/main.js"></script> 
    </body> 
</html>

现在我要删除所有阻止呈现以下首屏CSS和JS的suggested by Googles PageSpeed Insight。

如何推迟css和js文件，包括从谷歌加载的jQuery库？我应该怎么做modernizr？

来源

2013-10-04 lorenz

要删除你需要做以下这个特殊的警告：

推迟所有外部CSS的负载，直到页面onload事件后
推迟所有外部JS的负载，直到页面onload事件后

在实践中，这意味着你需要做到以下几点：

分割你CSS成所需，避免了“无样式内容闪光”（FOUC），其余
同样分割你的JavaScript所需
推迟其他的CSS和JS的负载，直到
内联CSS和JS在页面载入后。

使用构建工具是唯一可行的方法。您可以使用各种Grunt工具或使用基于蚂蚁的H5BP Build Script。

推迟负载的基本方法如下：

(function() { 
    // Load jQuery after page onload 
    function loadJS() { 
     var url = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"; 
     var n = document.createElement("script"); 
     n.src = url; 
     n.onload = loadJS1; 
     document.body.appendChild(n); 
    } 

    // Load some JS after jquery has been loaded. 
    function loadJS1() { 
     var url = "js/main.js"; 
     var n = document.createElement("script"); 
     n.src = url; 
     // Continue chaining loads if needed. 
     //n.onload = loadJS2; 
     document.body.appendChild(n); 
    } 

    // Check for browser support of event handling capability 
    if (window.addEventListener) { 
     window.addEventListener("load", loadJS, false); 
    } else if (window.attachEvent) { 
     window.attachEvent("onload", loadJS); 
    } else { 
     window.onload = loadJS; 
    } 
})();

来源

2015-09-21 21:56:40

HTML5 Boilerplate和cirical渲染路径/ deffering脚本和样式

回答

相关问题