1

我曾经基于HTML5 Boilerplate构建我的网站：head 中的样式和 modenizr、jQuery（google CDN 或托管文件）和结束 body 标记之前的脚本。像这样的东西：

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

现在，我想按照Googles PageSpeed Insight的建议删除所有在首屏下的渲染阻塞 css 和 js 。

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

4

1 回答 1

0

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

  • 将所有外部 CSS 的加载推迟到页面加载后
  • 将所有外部 JS 的加载推迟到页面加载之后

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

  • 将您的 CSS 拆分为所需的内容，以避免“无样式内容的闪烁”（FOUC）和其余部分
  • 同样拆分您的javascript
  • 内联所需的 CSS 和 JS
  • 将其他 CSS 和 JS 的加载推迟到页面加载之后。

使用构建工具是这样做的唯一明智的方法。您可以使用各种Grunt工具或基于 ant 的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-21T21:56:40.737 回答