Question

我最近做了一些优化，通过Google网站管理员工具在Pagespeed工具中提高了我正在使用的应用程序（AngularJS）的分数。

具体来说，谷歌要求“在首映内容中消除渲染阻止JavaScript和CSS”。所以我删除了声明并将它们移动到一个脚本，该脚本在页面加载完成后加载，所以我从：

<link rel="stylesheet" href="/bundles/vendor.css"/>
<link rel="stylesheet" href="/bundles/common.css"/>
<script src="/bundles/vendor.bundle.js"></script>

到此：

    <script type="text/javascript">
    function downloadJSAtOnload() {

        var stylesheet1 = document.createElement('link');
        stylesheet1.href = "https://fonts.googleapis.com/css?family=Poppins";
        stylesheet1.rel = 'stylesheet';
        stylesheet1.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(stylesheet1);

        var stylesheet2 = document.createElement('link');
        stylesheet2.href = "/bundles/vendor.css";
        stylesheet2.rel = 'stylesheet';
        stylesheet2.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(stylesheet2);

        var stylesheet3 = document.createElement('link');
        stylesheet3.href = "/bundles/common.css";
        stylesheet3.rel = 'stylesheet';
        stylesheet3.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(stylesheet3);

        var element1 = document.createElement("script");
        element1.src = "/bundles/common.bundle.js";
        document.body.appendChild(element1);

    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

位于body元素的底部。

它运作良好并且提高了我的分数，但是，它导致分发问题。

我们使用grunt来构建资产，我们通常使用uglify，minify等。我们调用 filerev grunt任务在资产文件中生成缓存buster版本ID，然后我们调用 usemin 将原始资产文件的引用替换为版本号的引用，以破坏缓存。

问题是usemin只对具有 src 元素的元素起作用，而且由于我现在加载这些资源的方式，它保留了对原始资产名称的引用。这意味着我必须在发布期间手动更改它，这是不可接受的。

所以我正在寻找方法使其成功或替代但到目前为止没有运气。

Answer 1

在我看来，你不应该首先这样做。

在页面上加载和呈现HTML后，您正在加载所有CSS。这意味着您几乎肯定会有flash of unstyled content。为了防止这种情况发生，您的样式应该在<head>

中加载

请注意window.onload等待您的文档窗口准备好进行演示，这意味着已加载所有外部资源。例如，如果页面上有图像，则在加载所有图像之前，不会加载CSS和JS。这很可能比您应该等待加载JS更长。

由于<script>标记阻止了DOM的构建（因为它需要执行该JS），更好的方法可能是使用async or defer attributes，因此您仍然可以添加<script>标记到<body>的末尾，但不会阻止您的网页呈现。

有过度优化这样的事情。获得更好的Pagespeed得分值得降低您的用户体验吗？这取决于你确定，但我倾向于学习＆＃34; no＆＃34; ：）

Answer 2

好吧，最后我能够解决这个问题。我使用了应用于所有字符串的filerev-apply grunt plugin，而不仅仅是那些带有src属性的脚本元素，因为usemin 似乎要做。

效果很好

我使用带有别名的grunt，所以这是filerev_apply.js任务文件：

module.exports = function(grunt, options) {
    return {
        dist: {
            files: [{
                '<%= dist %>/index.html': '<%= dist %>/index.html',
            }]
        }
    };
};

在filerev之后调用它，你就完成了。

在优化Pagespeed之后，Grunt usemin无法正常工作

2 个答案: