通过Javascript加载CDN文件

Loading CDN files via Javascript

本文关键字：文件 CDN 加载 Javascript 通过      更新时间：2023-09-26

我一直在努力实现100/100的谷歌页面速度(https://developers.google.com/speed/pagespeed/insights/)，但我一直在尝试使用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和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>

Google对此给出了很好的解释:https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

看起来他们想让你内联CSS，这对页面的初始显示至关重要。然后加载二级CSS。由于bootstrap CSS是一个大的组合，我认为区分关键/非关键对于你的页面来说是很重要的。

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

我建议您将关键路径的样式内联(在折叠上方):https://github.com/addyosmani/above-the-fold-css-tools
https://github.com/addyosmani/critical

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

相关文章：