在对Pagespeed进行优化后不工作的用户

Question

最近，我进行了一些优化，以提高我正在开发的应用程序(AngularJS)的评分，该应用程序是由Google工具开发的。

具体来说，谷歌要求“消除上述内容中的渲染阻塞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>

身体元素的底部。

它发挥了很大的作用，大大提高了我的分数，但是，它给我的分配带来了问题。

我们使用grunt来构建资产，我们执行通常的uglify、minify等操作，我们调用filerev grunt任务在资产文件中生成缓存破坏版本id，然后调用usemin来替换原始资产文件的引用，以替换那些具有关闭缓存的版本号的文件。

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

因此，我正在寻找方法，使它工作或替代，但到目前为止还没有运气。

Answer 1

在我看来，你一开始不应该这样做。

在加载HTML并在页面上呈现之后，您将加载所有CSS。这意味着您几乎肯定会有一个非样式内容的闪存。为了防止这种情况发生，您的样式应该在您的<head>中加载。

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

由于<script>标记阻止了DOM的构建(因为它需要执行那个JS)，一个更好的方法可能是使用异步或延迟属性，这样您仍然可以将<script>标记添加到您的<body>的末尾，但是它不会阻止您的页面被呈现。

有一件事叫做过度优化。获得更好的佩格语分数值得降低你的用户体验吗？这取决于你的决定，但我倾向于学会“不”:)

Answer 2

我终于解决了这个问题。我使用了应用于所有字符串的filerev-应用grunt插件，而不仅仅是usemin 所做的那些具有src属性的脚本元素。

效果很好

我在别名中使用grunt，所以这是filerev_apply.js任务文件：

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

在文件后打电话，你就完事了。