javascript - 检测js/css文件加载失败

Question

在我们的 SAAS 网络应用程序中，我们使用了一大堆 js 和 css 文件(总共大约 80 个)，并且一些文件，尤其是其他依赖于 jQuery 的文件，必须在我们的应用程序正常运行之前加载。

在理想的网络环境中，这不会造成任何问题，因为每次都会加载所有资源。但是在生产环境中，我们发现在网络不佳的情况下，部分js/css文件加载不正常的情况并不少见。发生这种情况时，浏览器会在控制台中记录 js/css 加载超时错误，应用程序似乎正在运行。然后，当应用程序尝试调用加载失败的 js 文件中定义的某些函数时，会抛出一些未定义的异常并记录在控制台中，并且应用程序停止运行，这在大多数情况下会让用户感到困惑。请注意，我不是在谈论 404 加载错误，它们是编程/部署错误，只是网络连接不良导致的超时错误。

我们不认为这样的体验是最佳的。我们想检查在应用程序运行之前是否加载了所有资源。如果有任何问题，我们会警告用户，以便他可以选择重新加载应用程序，我们认为这可以减少很多困惑。

有些人可能会建议合并文件并将数量减少到一对，是的，这可以减少出现超时错误的可能性。但这仍然不能解决问题——我们仍然可能在加载几个文件时遇到超时错误。

经过对 SO 的一些研究，我发现了以下建议:
1 使用window.error 捕获未捕获的异常，包括未定义的异常；
2 在每个js/css文件中放置一些特殊的变量/状态，并检测该变量/状态是否存在；
3 使用onload事件处理器注册一个loading事件已经成功完成，然后调用setTimeout查看是否有事件没有被注册；

AFAICS，这些有一些缺点:
1 是一种惰性检测技术，即在抛出异常之前我们不知道脚本未正确加载；
2 乱七八糟，部分情况需要修改第三方插件；
3 据说IE在某些场景下触发onload事件有问题；

那么检测此类 js/css 文件加载失败的最佳跨浏览器机制是什么？

Answer 1

window.addEventListener("error", function (e, url) {
    var eleArray = ["IMG", "SCRIPT", "LINK"];
    var resourceMap = {
        "IMG": "Picture file",
        "SCRIPT": "JavaScript file",
        "LINK": "CSS file"
    };
    var ele = e.target;
    if(eleArray.indexOf(ele.tagName) != -1){
        var url = ele.tagName == "LINK" ? ele.href: ele.src;
        console.log("src：" + url + " File " + resourceMap[ele.tagName] + " failed loading. ");

        return true;// dont show in console
    }
}, true);