javascript - 通过 Javascript 加载 CDN 文件

Question

我一直在努力在 Google Pagespeed ( https://developers.google.com/speed/pagespeed/insights/ ) 上达到 100/100，但在尝试使用 Javascript 下载基于 CDN 的文件时，我总是被挂断。我收到“注意:已显示临时 header ”。我认为它出于安全原因阻止了这种调用，但我被卡住了。

我可以像这样调用脚本文件异步，谷歌喜欢这样:

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

Google 提示说我有一个“阻塞 CSS 资源”。

这是我到目前为止一直在尝试使用的代码的副本:

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

这是我最终创建的代码，用于同时异步加载 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>