异步加载脚本时如何编写 CDN 后备表达式？答案

【问题标题】：How do i write a CDN fallback expression when loading a script asynchronously?异步加载脚本时如何编写 CDN 后备表达式？
【发布时间】：2016-11-17 15:39:15
【问题描述】：

我正在按如下方式设置我的 jQuery 包：

var bundle = new ScriptBundle("~/bundles/jquery", "//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js");

// Path to the version of the file on your server (in case the CDN fails)
bundle.Include("~/scripts/jquery-{version}.js");

// JS expression to run, to test if CDN delivered the file or not
bundle.CdnFallbackExpression = "window.$";

bundles.Add(bundle);

为了提高我的 Google PageSpeed Insights 分数，我选择异步加载脚本：

@Scripts.RenderFormat(@"<script src=""{0}"" async></script>", "~/bundles/jquery")

但现在，CDN 回退表达式似乎总是失败，并最终加载脚本两次；一次来自我的后备包，一次来自 CDN，当异步调用完成时。我假设是因为当它运行回退测试时，对 CDN 的异步调用尚未完成。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" async=""></script>
<script>(window.$)||document.write('<script src="/bundles/jquery"><\/script>');</script>
<script src="/bundles/jquery"></script>

有没有更智能的方法可以编写我的后备表达式？

有没有更好的解决方案？

我会将 jQuery 加载到更靠近底部的位置，但它会破坏任何依赖它的内联调用。

【问题讨论】：

标签： c# asp.net-mvc-5 cdn bundling-and-minification system.web.optimization

【解决方案1】：

<script id="srequire" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.jsWRONG" async="async"></script>
<script type="text/javascript">
    function sOnerror() {
        console.log("sOnerror");
        //if (typeof window.jQuery === 'undefined') {
            var scr = document.createElement("script");
            scr.src = "/bundles/jquery";
            scr.async = true;
            document.body.appendChild(scr);
       //}
    }
    var element = document.getElementById("srequire");
    console.log("element", element);
    if (element.addEventListener) {
        //element.addEventListener("load", onsuccess, false);
        element.addEventListener("error", sOnerror, false);
    } else if (element.attachEvent) {
        //element.attachEvent("onload", onsuccess);
        element.attachEvent("onerror", sOnerror);
    } else {
        //element.onload = onsuccess;
        element.onerror = sOnerror;
    }
</script>

为了让你测试它，我在 js 名称中输入了错误以检查脚本是否有效我在 ff chrome 上检查过，即 opra 和 edge 您可以使用requirejs，但有时也会从cdn失败这就是我使用这个脚本的原因乐于分享希望对你有帮助

"如果加载导致错误（例如 DNS 错误或 HTTP 404 错误）执行脚本块必须只包括在元素上触发一个名为 error 的简单事件。”

source w3.org

【讨论】：