Question

我过去常常根据头部中的HTML5 Boilerplate：styles和modenizr，jQuery（google CDN或托管文件）以及关闭正文标记之前的脚本来构建我的网站。这样的事情：

<!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？

Answer 1

要删除此特定警告，您需要执行以下操作：

推迟所有外部CSS的加载，直到页面加载
将所有外部JS的负载推迟到页面上载

在实践中，这意味着您需要执行以下操作：

将您的CSS拆分为必需的，以避免无格式内容的闪现＆＃34; （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;
    }
})();

HTML5 Boilerplate和关键渲染路径/延迟脚本和样式

1 个答案: