CDN 后备问题

Question

我对是否使用cdn感到困惑，所以我浏览了这些链接link1和link2

他们告诉使用本地脚本作为 cdn 的后备

所以我保留了这段代码

    <script src="https://secure.skypeassets.com/i/scom/js/skype-uri.js" async></script>
    <script>
    window.Skype || document.write('<script src="javascripts/skype-uri.js" async>\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script>
    window.angular || document.write('<script src="javascripts/angular.min.js">\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
    <script>
    window['angular-animate'] || document.write('<script src="javascripts/angular-animate.min.js">\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>
    <script>
    window['angular-aria'] || document.write('<script src="javascripts/angular-aria.min.js">\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
    <script>
    window['angular-material'] || document.write('<script src="javascripts/angular-material.min.js">\x3C/script>')
    </script>

问题是它获取本地文件并从 cdn 获取相同的文件。

当我点击页面并通过 charles 代理（或任何其他网络监控工具）进行监控时

有点奇怪，但我无法在这里找出问题。

Answer 1

使用window.angular || /* fallback code*/ 的脚本的后备看起来很好，应该可以工作（对我有用）。

请记住，测试不是指脚本名称，而是检查是否存在已知的全局变量，如果脚本已经加载，则应该设置该变量。因此，对于其他脚本，您需要知道它们设置了哪些全局变量（如果有）或它们添加到现有对象的方法/属性并检查它们。

顺便说一句，您的 Skype 脚本上的 async 标志会破坏这种测试，因为在浏览器获取和解析外部脚本之前会执行对 Skype 的检查。

至于样式表后备，这可以正常工作（即使本地副本也失败 - 浏览器会以某种方式处理这个问题；））：

<link rel="stylesheet" href="//cdnurl/style.css" onerror="this.href='localcopy.css'" />

编辑：要检查角度模块，您可以在 try-catch 块中使用 angular.module('moduleName')（受 this answer 启发）：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
<script>
try {
  angular.module('ngAnimate')
} catch(e){
  document.write('<script src="javascripts/angular-animate.min.js">\x3C/script>')
}
</script>