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

Question

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

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

1. 检测加载缓慢（检测到加载缓慢后应立即开始回退……）
2. 检测从 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 并在下一页加载时使用它来自动从您的主服务器加载所有内容。