通过 Javascript 加载 CDN 文件答案

【问题标题】：Loading CDN files via Javascript通过 Javascript 加载 CDN 文件
【发布时间】：2020-07-05 00:45:32
【问题描述】：

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

我可以像这样调用脚本文件 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">

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

大家有什么建议吗？

【问题讨论】：

最后一段代码到底有什么问题？目前尚不清楚您需要帮助解决什么问题。只要您的页面可以异步加载 CSS 样式表（您的用户可能会在样式表加载之前看到页面的非样式版本），该代码在我看来应该可以工作。
@jfriend00 我不确定您是否阅读了我上面的问题。问题是“您如何使用 Javascript 加载 CDN CSS 文件”，因为我的浏览器似乎都无法使用上面的代码工作，并且为了从 Google 获得最高评分，您不得在主页之前调用您的 CSS 资源已完全下载。
我把你写的所有东西都看了几遍。你在问什么并不完全清楚。你的问题也是：“为什么我的动态插入样式表的代码不起作用？”。我没有看到您添加样式表的代码有任何问题，所以我认为您的逻辑/代码肯定有其他问题，您没有向我们展示。
@jfriend00 尝试使用它，您将收到一条浏览器错误消息，“注意：显示临时标题。”并且资源不下载。我认为它与浏览器内置的安全性有关，但我不确定。如果我使用上面的代码从我自己的域中下载任何东西，它就可以正常工作，但这不是我在这里想要做的。
这里没有错误：jsfiddle.net/jfriend00/s80q5f53 在 Chrome 和 Firefox 中使用您的代码，.css 文件似乎加载得很好。我仍然认为还有其他事情发生。

标签： javascript css asynchronous cdn

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

然后加载其他 css async:
https://github.com/filamentgroup/loadCSS/

【讨论】：