Question

我一直在努力在Google Pagespeed（https://developers.google.com/speed/pagespeed/insights/）上实现100/100，但在尝试使用Javascript下载基于CDN的文件时，我一直感到困惑。我明白了：显示了临时标题。＆＃39;我认为出于安全原因阻止了这种呼叫但是我被卡住了。

我可以像这样调用脚本文件asycn，Google喜欢这样：

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" async></script>

但我该怎么办CSS文件呢？如果我称之为正常方式：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

谷歌抱怨并说我有一个阻止CSS资源＆＃39;。

这是我到目前为止尝试使用的代码的副本：

var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css';
headID.appendChild(cssNode);

有人有任何建议吗？

Answer 1

Google在此提供了一个很好的解释： https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

似乎他们希望您内联对页面初始显示至关重要的CSS。然后加载辅助CSS。由于bootstrap CSS是一个很大的组合，我认为将页面的关键/非关键区分开来是非常重要的。

也许您可以内联bootstrap.css中存在的一些重复的CSS

Answer 2

我建议你内联关键路径的样式（在首页上方）： https://github.com/addyosmani/above-the-fold-css-tools
https://github.com/addyosmani/critical

然后加载另一个css异步：
https://github.com/filamentgroup/loadCSS/

Answer 3

这是我最终创建的代码，用于同时处理同时加载css和js文件的异步。只需在关闭标记之前将其放在HTML的底部，然后根据需要编辑loadjscssfile（）调用。

<script>
    /* Beginning of async download code. */
    window.onload = function(){
        function loadjscssfile(filename, filetype) {
            if(filetype == "js") {
                var cssNode = document.createElement('script');
                cssNode.setAttribute("type", "text/javascript");
                cssNode.setAttribute("src", filename);
            } else if(filetype == "css") {
                var cssNode = document.createElement("link");
                cssNode.setAttribute("rel", "stylesheet");
                cssNode.setAttribute("type", "text/css");
                cssNode.setAttribute("href", filename);
            }
            if(typeof cssNode != "undefined")
                document.getElementsByTagName("head")[0].appendChild(cssNode);
        }
        loadjscssfile("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css", "css");
        loadjscssfile("//fonts.googleapis.com/css?family=Open+Sans:300&amp;subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese", "css");
        loadjscssfile("/css/style.css", "css");
        loadjscssfile("//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", "js");
        loadjscssfile("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js", "js");
    };
    /* End of async download code. */
</script>

通过Javascript加载CDN文件

3 个答案: