Как написать запасное выражение CDN при асинхронной загрузке скрипта?

Question

Я настраиваю свой пакет 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 ближе к основанию, но тогда он прерывал бы любые встроенные вызовы, которые зависят от него.

Answer 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>

чтобы вы его протестировали, я поставил WRONG в имени js, чтобы проверить, работает ли скрипт. Я проверил его на ff chrome, то есть opra и edge, вы можете использовать requirejs, но иногда это не удается с помощью cdn, поэтому я использую этот скрипт с радостью делиться надеждой помогает

"Если загрузка привела к ошибке (например, ошибка DNS или ошибка HTTP 404) Выполнение блока сценария должно просто состоять из запуска простого события с именем error на элементе".

источник w3.org