javascript - JavaScript 和 CSS 的 Bootstrap 3 后备

Question

昨天我所有的 Bootstrap 3.3.x 站点都没有从 MaxCdn(荷兰)加载 js/css 文件，所以今天我寻找了一个后备方案。 JQuery 很简单，但是对于 Bootstrap CSS，我只找到将本地 css 文件作为头部第一行的示例。以下代码是我迄今为止将本地 Bootstrap CSS 放在正确位置的代码，以防发生回退。

在头部:

<meta charset="utf-8">
<title>CDN fallback</title>
<link id="cssbs" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/ABC_bootstrap.min.css">
<link id="csscu" rel="stylesheet" href="style.css">
<meta name="author" content="Foo">

正文末尾:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/ABC_jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="lib/jquery-1.11.1/jquery.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/ABC_bootstrap.min.js"></script>
<script>
if(typeof($.fn.modal) === 'undefined'){
  document.write('<script src="lib/bootstrap-3.3.5/js/bootstrap.min.js"><\/script>')
}
$(document).ready(function(){
  var bodyColor = $('body').css('color');
  var localCss  = '<link rel="stylesheet" href="lib/bootstrap-3.3.5/css/bootstrap.min.css">';
  if(bodyColor != 'rgb(51, 51, 51)'){
    $("#cssbs").replaceWith(localCss);
  }
});
</script>

我的问题:性能怎么样？有更好的后备建议吗？

注意:为了进行测试，我在 CDN 文件名中输入了 ABC。

谢谢，罗纳德

Answer 1

对 CDN 进行回退加载的一种方法是在超时的情况下异步加载脚本/样式表，这样，如果 CDN 响应时间过长(因为它可能已关闭)，您可以在合理的时间。为此，您可以实现一个函数(例如下面的 fallbackLoad)，并将其放在 HTML 页面的 HEAD 部分中。

function fallbackLoad(urls, callback, timeout) {
    var url = urls.shift()
    timeout = timeout || undefined;
    callback = callback || function() {};
    var error = (function(urls, callback) {
        return function() {
            if (urls.length == 0) {
                console.error('Failed to fallback, all urls down');
            } else {
                makeRequest(urls.shift(), callback, error);
            }
         };
    })(urls, callback);
    return makeRequest(url, callback, error);
}

然后将您的 makeRequest 函数定义为

function makeRequest(url, success, error, timeout) {
    var xhr = new XMLHttpRequest();
    if (timeout) {
        xhr.ontimeout = error;
    }
    xhr.onload = function() {
        if (xhr.readyState === 4) { 
            if (xhr.status === 200) {
                success(xhr.responseText);
            } else {
                error();
            }
         }
    };
    xhr.open("GET", url, true /* async */);
    if (timeout) xhr.timeout = timeout;
    xhr.send(null);
}

现在，您可以在脚本的 HEAD 中调用 fallbackLoad，而不会阻止页面的加载。您可以将其称为

fallbackLoad([
    '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/ABC_jquery.min.js',
    'lib/jquery-1.11.1/jquery.min.js'
], function(response) {
    ....
}, 500 /* ms */);