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>

CDN后备问题

1 个答案: