HTML5 样板和循环渲染路径/引用脚本和样式

我曾经基于HTML5样板构建我的网站：头部的样式和modenizr，jQuery（谷歌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>

现在我想按照Google的PageSpeed Insight的建议删除所有折叠下的渲染阻塞css和js。

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

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

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

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

将您的CSS拆分为避免"无样式内容闪光"（FOUC）所需的CSS和其余部分
同样拆分你的JavaScript
内联所需的 CSS 和 JS
将其他 CSS 和 JS 的加载推迟到页面加载之后。

使用构建工具是唯一合理的方法。您可以使用各种Grunt工具或基于ant的H5BP构建脚本来做到这一点。

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

(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;
    }
})();

相关内容

最新更新

热门标签：