Question

我在网站上使用CDN（maxcdn.com）来获取js，css和图像。我注意到，从一些ISP来说，这些资源要么完全无法加载，要么加载速度非常慢。但是，从我的服务器本地静态服务总是正常。因此，我希望能够检测到此类资源加载失败并通过回退到本地服务来响应它们。

我在这里找到了几种用于检测js和css加载失败的解决方案。最常见的是使用嵌入式js检查来自css的一些js var和一些cssRules（位于脚本和链接标记之后）。但是，这不允许：

检测缓慢加载（一旦检测到缓慢，就应该开始后退......）
检测从css引用的图像的加载失败。

是否有任何简单，优雅的方法来检测资源加载失败/缓慢并迅速回退到本地服务？

Answer 1

正如此处https://stackoverflow.com/a/2021325/745190所述，在开始加载脚本后无法禁用脚本。

您可以尝试最初从cdn加载一个非常小的（.1kb）脚本。在非常短的时间内测试该脚本，如果它下载使用javascript将其他脚本标记附加到您的页面，如果它不是一个不必要地下载的小文件。

遗憾的是，这种方法有两个主要缺点。第一个是对cdn的额外查询，第二个是完全加载小脚本失败可能导致浏览器轮子继续旋转。

如果您不确定，测试是这样的：

/* tiny-file.js */
var window.speedTest = true;

和

/* The test */
setTimeout(function(){
    if (window.speedTest !== true) {
        //append local javascript
    }
    else {
        //append cdn javascript
    }
}, 50);

Answer 2

我怀疑您的问题主要发生在某些ISP上。

如果你的主要目标是在保持CDN作为主要解决方案的同时实现性能，我可以看到两个选项。首先，您尝试识别失败的ISP，但它可能相当长且昂贵。另一种选择是“学习”。尝试从CDN加载一个简单的JS设置变量。如果失败，您可以认为存在问题。设置一个cookie并在下一页加载时使用它来自动加载主服务器上的所有内容。

处理从CDN加载资源的失败或缓慢。

2 个答案: